{% extends "base.html" %}

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

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

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

    <form hx-post="/auth/register" hx-target="#register-result" hx-swap="innerHTML" class="space-y-4">
        <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 pattern="[a-zA-Z0-9_-]+"
                   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="email" class="block text-sm font-medium text-gray-300 mb-2">Email (optional)</label>
            <input type="email" id="email" name="email"
                   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 minlength="6"
                   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="password2" class="block text-sm font-medium text-gray-300 mb-2">Confirm Password</label>
            <input type="password" id="password2" name="password2" required minlength="6"
                   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">
            Register
        </button>
    </form>

    <p class="mt-6 text-gray-400">
        Already have an account? <a href="/auth/login" class="text-blue-400 hover:text-blue-300">Login</a>
    </p>
</div>
{% endblock %}