{% extends "base.html" %}

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

{% block content %}
<div class="flex flex-col items-center justify-center min-h-[80vh]">
    <div class="w-full max-w-md p-8 glass rounded-2xl border border-white/10 shadow-2xl">
        <div class="text-center mb-8">
            <div class="inline-block p-4 bg-blue-500 rounded-full mb-4 shadow-lg shadow-blue-500/50">
                <i class="la la-user-lock text-4xl text-white"></i>
            </div>
            <h2 class="text-2xl font-bold">Bienvenido</h2>
            <p class="text-slate-400 text-sm">Estadística Maranatha Infantil</p>
        </div>

        <!-- Bloque para mostrar mensajes de éxito desde la URL (Redirects) -->
        <div id="feedback-container"></div>
        <script>
            const urlParams = new URLSearchParams(window.location.search);
            const msg = urlParams.get('msg');
            if (msg) {
                document.getElementById('feedback-container').innerHTML = `
                    <div class="mb-6 p-3 bg-emerald-500/20 border border-emerald-500/50 rounded-lg flex items-center gap-3">
                        <i class="la la-check-circle text-emerald-400 text-xl"></i>
                        <p class="text-emerald-200 text-xs">${msg}</p>
                    </div>`;
            }
        </script>

        {% if error %}
        <div class="mb-6 p-3 bg-red-500/20 border border-red-500/50 rounded-lg flex items-center gap-3">
            <i class="la la-exclamation-circle text-red-400 text-xl"></i>
            <p class="text-red-200 text-xs">{{ error }}</p>
        </div>
        {% endif %}

        <form action="{{ prefix }}/login" method="post" class="space-y-5">
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Usuario / Email</label>
                <input type="text" name="username" required
                    class="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
                    placeholder="ej. secretaria@emi.com">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Contraseña</label>
                <input type="password" name="password" required
                    class="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
                    placeholder="••••••••">
            </div>
            <button type="submit"
                class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-4 rounded-xl shadow-lg shadow-blue-600/30 transition-all active:scale-95">
                INGRESAR
            </button>
        </form>

        <!-- Enlaces a Registro y Recuperación -->
        <div class="mt-8 pt-6 border-t border-white/10 text-center space-y-4">
            <p class="text-sm text-slate-400">
                ¿No tienes cuenta? <a href="{{ prefix }}/register" class="text-blue-400 hover:underline font-medium">Regístrate
                    aquí</a>
            </p>
            <p class="text-sm text-slate-400">
                <a href="{{ prefix }}/forgot-password" class="text-blue-400 hover:underline">¿Olvidaste tu contraseña?</a>
            </p>
        </div>
    </div>
</div>
{% endblock %}