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

{% block title %}Inscription - 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">Inscription</h1>

        <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 class="grid grid-cols-2 gap-4">
                <div>
                    <label for="first_name" class="block text-xs font-black uppercase tracking-widest mb-2">Prénom</label>
                    <input type="text" id="first_name" name="first_name" required
                           class="w-full border-2 border-gray-900 p-3 font-bold focus:bg-indigo-50 outline-none">
                </div>
                <div>
                    <label for="last_name" class="block text-xs font-black uppercase tracking-widest mb-2">Nom</label>
                    <input type="text" id="last_name" name="last_name" required
                           class="w-full border-2 border-gray-900 p-3 font-bold focus:bg-indigo-50 outline-none">
                </div>
            </div>

            <div>
                <label for="email" class="block text-xs font-black uppercase tracking-widest mb-2">Email</label>
                <input type="email" id="email" name="email" required
                       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 minlength="8"
                       class="w-full border-2 border-gray-900 p-3 font-bold focus:bg-indigo-50 outline-none">
            </div>

            <button type="submit" class="w-full bg-yellow-400 text-gray-900 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">
                Créer mon compte
            </button>

            <p class="text-center font-bold text-sm">
                Déjà un compte ?
                <a href="{{ path('app_login') }}" class="text-indigo-600 underline font-black">Connexion</a>
            </p>
        </form>
    </div>
{% endblock %}