{% extends "base.html" %}

{% block title %}Olvidé mi 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">¿Olvidaste tu 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 message %}
    <div class="bg-green-500/20 border border-green-500 text-green-400 p-3 rounded-lg mb-4 text-sm">
        {{ message }}
    </div>
    {% endif %}

    {% if email_sent %}
    <p class="text-center text-slate-300 mb-4">
        Si tu correo electrónico está registrado, recibirás un enlace para restablecer tu contraseña.
        Por favor, revisa tu bandeja de entrada (y la carpeta de spam).
    </p>
    {% else %}
    <p class="text-center text-slate-300 mb-4">
        Ingresa tu correo electrónico o nombre de usuario para recibir un enlace de restablecimiento.
    </p>
    <form action="{{ prefix }}/forgot-password" method="post" class="space-y-4">
        <div>
            <label class="block text-sm font-medium mb-1">Correo Electrónico / Nombre de Usuario</label>
            <input type="text" name="email" 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">
            Enviar Enlace de Restablecimiento
        </button>
    </form>
    {% endif %}

    <p class="mt-6 text-center text-sm text-slate-400">
        <a href="{{ request.url_for('login') }}" class="text-blue-400 hover:underline">Volver al inicio de sesión</a>
    </p>
</div>
{% endblock %}