{% extends "base.html" %}

{% block title %}Login - Art-DAG{% endblock %}

{% block content %}
<div class="max-w-md mx-auto">
    <h2 class="text-xl font-semibold mb-6">Login</h2>

    <div id="login-result"></div>

    <form hx-post="/auth/login" hx-target="#login-result" hx-swap="innerHTML" class="space-y-4">
        {% if return_to %}
        <input type="hidden" name="return_to" value="{{ return_to }}">
        {% endif %}

        <div>
            <label for="username" class="block text-sm font-medium text-gray-300 mb-2">Username</label>
            <input type="text" id="username" name="username" required
                   class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white focus:border-blue-500 focus:outline-none">
        </div>

        <div>
            <label for="password" class="block text-sm font-medium text-gray-300 mb-2">Password</label>
            <input type="password" id="password" name="password" required
                   class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white focus:border-blue-500 focus:outline-none">
        </div>

        <button type="submit" class="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg">
            Login
        </button>
    </form>

    <p class="mt-6 text-gray-400">
        Don't have an account? <a href="/auth/register" class="text-blue-400 hover:text-blue-300">Register</a>
    </p>
</div>
{% endblock %}