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

{% block title %}Connexion - E-Cosplay Ticket{% endblock %}

{% block body %}
    <div class="max-w-md mx-auto py-20 px-4">
        <h1 class="text-5xl font-black uppercase tracking-tighter mb-12 text-center">Connexion</h1>

        {% if error %}
            <div class="border-4 border-gray-900 bg-red-400 px-6 py-4 font-black shadow-[4px_4px_0px_rgba(0,0,0,1)] mb-8">
                {{ error.messageKey|trans(error.messageData, 'security') }}
            </div>
        {% endif %}

        <form method="post" class="bg-white border-4 border-gray-900 p-8 shadow-[8px_8px_0px_rgba(0,0,0,1)] space-y-6">
            <div>
                <label for="email" class="block text-xs font-black uppercase tracking-widest mb-2">Email</label>
                <input type="email" id="email" name="_username" value="{{ last_username }}" required autofocus
                       class="w-full border-2 border-gray-900 p-3 font-bold focus:bg-indigo-50 outline-none">
            </div>

            <div>
                <label for="password" class="block text-xs font-black uppercase tracking-widest mb-2">Mot de passe</label>
                <input type="password" id="password" name="_password" required
                       class="w-full border-2 border-gray-900 p-3 font-bold focus:bg-indigo-50 outline-none">
            </div>

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

            <button type="submit" class="w-full bg-indigo-600 text-white font-black uppercase tracking-widest py-4 border-4 border-gray-900 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
                Se connecter
            </button>

            <p class="text-center font-bold text-sm">
                Pas encore de compte ?
                <a href="{{ path('app_register') }}" class="text-indigo-600 underline font-black">Inscription</a>
            </p>
        </form>
    </div>
{% endblock %}