{% extends "base.html" %}

{% block title %}Restablecer Contraseña - 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">Restablecer Contraseña</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 %}

    {% if token %}
    <p class="text-center text-slate-300 mb-4">
        Establece una nueva contraseña para el usuario: <span class="font-bold text-blue-300">{{ username }}</span>
    </p>
    <form action="{{ prefix }}/reset-password/{{ token }}" method="post" class="space-y-4">
        <div>
            <label class="block text-sm font-medium mb-1">Nueva 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">Confirmar Nueva Contraseña</label>
            <input type="password" name="confirm_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>

        <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">
            Restablecer Contraseña
        </button>
    </form>
    {% else %}
    <p class="text-center text-slate-300 mb-4">
        El enlace de restablecimiento es inválido o ha expirado. Por favor, solicita uno nuevo.
    </p>
    {% endif %}

    <p class="mt-6 text-center text-sm text-slate-400">
        <a href="{{ prefix }}/forgot-password" class="text-blue-400 hover:underline">Solicitar nuevo enlace</a>
    </p>
</div>
{% endblock %}