{% extends 'base.html.twig' %}

{% block title %}Connexion - Association E-Cosplay{% endblock %}
{% block description %}Connectez-vous au CRM E-Cosplay.{% endblock %}

{% block header %}
    <header class="sticky top-0 z-50 glass-heavy" >
        <div class="flex justify-center items-center h-16">
            <a href="{{ path('app_home') }}" aria-label="CRM E-Cosplay - Accueil">
                <img class="h-10 md:h-12 w-auto" src="{{ 'logo.jpg' | imagine_filter('logo') }}" alt="CRM E-Cosplay" loading="eager">
            </a>
        </div>
    </header>
{% endblock %}

{% block body %}
<div class="flex items-center justify-center min-h-[calc(100vh-4rem)] px-4">
    <div class="w-full max-w-sm">
        {% if error %}
            <div class="mb-6 p-4 glass border border-red-300 text-red-800 font-medium text-sm">
                {{ error.messageKey|trans(error.messageData, 'security') }}
            </div>
        {% endif %}

        <div class="glass-heavy overflow-hidden">
            <div class="p-8">
                <form method="post" class="flex flex-col gap-5">
                    <div>
                        <label for="email" class="block text-xs font-bold uppercase tracking-wider mb-2 text-gray-600">Email</label>
                        <input type="email" id="email" name="_username" required value="{{ last_username }}"
                               class="input-glass w-full px-4 py-3 text-sm font-medium"
                               placeholder="votre@email.fr">
                    </div>

                    <div>
                        <label for="password" class="block text-xs font-bold uppercase tracking-wider mb-2 text-gray-600">Mot de passe</label>
                        <input type="password" id="password" name="_password" required
                               class="input-glass w-full px-4 py-3 text-sm font-medium"
                               placeholder="••••••••">
                    </div>

                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                    <button type="submit" class="btn-gold w-full px-6 py-3 text-sm font-bold uppercase tracking-wider text-gray-900">
                        Connexion E-Cosplay
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
