{% extends "base.html" %}

{% block title %}Registro - EMI{% endblock %}

{% block content %}
<div class="max-w-md mx-auto mt-10 p-6 bg-slate-800 rounded-xl shadow-xl border border-slate-700">
    <h2 class="text-2xl font-bold mb-6 text-center text-blue-400">Crear Nueva Cuenta</h2>

    {% if error %}
    <div class="bg-red-500/20 border border-red-500 text-red-400 p-3 rounded-lg mb-4 text-sm">
        {{ error }}
    </div>
    {% endif %}

    <form action="{{ prefix }}/register" method="post" class="space-y-4">
        <!-- Campo Honeypot (Anti-Bot) -->
        <div class="hidden">
            <label>Si eres humano, deja esto vacío:</label>
            <input type="text" name="website" tabindex="-1" autocomplete="off">
        </div>

        <div>
            <label class="block text-sm font-medium mb-1">Nombre de Usuario</label>
            <input type="text" name="username" required
                class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none">
        </div>

        <div>
            <label class="block text-sm font-medium mb-1">Contraseña</label>
            <input type="password" name="password" required
                class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none">
        </div>

        <div>
            <label class="block text-sm font-medium mb-1">Rol Solicitado</label>
            <select name="rol_nombre" class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none">
                {% for rol in roles %}
                <option value="{{ rol.nombre }}">{{ rol.nombre|capitalize }}</option>
                {% endfor %}
            </select>
            <p class="text-[10px] text-slate-500 mt-1">* Sujeto a disponibilidad de cupos por rol.</p>
        </div>

        <div class="bg-blue-500/10 p-4 rounded-lg border border-blue-500/20">
            <label class="block text-sm font-medium mb-2 text-blue-300">{{ math_challenge }}</label>
            <input type="hidden" name="math_expected" value="{{ math_result }}">
            <input type="number" name="math_answer" required placeholder="Tu respuesta"
                class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none">
        </div>

        <button type="submit"
            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded-lg transition-colors shadow-lg shadow-blue-900/20">
            Registrar Usuario
        </button>
    </form>

    <p class="mt-6 text-center text-sm text-slate-400">
        ¿Ya tienes cuenta? <a href="{{ request.url_for('index') }}" class="text-blue-400 hover:underline">Inicia sesión</a>
    </p>
</div>
{% endblock %}