{% extends 'revervation/base.twig' %}

{% block title %}Configuration de votre compte - Ludikevent{% endblock %}

{% block body %}
    <div class="min-h-screen flex items-center justify-center p-6 bg-slate-50">
        <div class="max-w-md w-full bg-white p-10 rounded-[2.5rem] shadow-xl shadow-slate-200/50 border border-slate-100">

            <div class="text-center mb-10">
            <span class="inline-block px-4 py-1.5 bg-blue-50 text-blue-600 text-[10px] font-black uppercase tracking-[0.2em] rounded-full mb-6">
                Étape de sécurité
            </span>

                <h1 class="text-3xl font-black italic uppercase text-slate-900 leading-tight">
                    Activez votre <br><span class="text-blue-600">Espace Client</span>
                </h1>
                <p class="text-slate-500 text-sm mt-4 italic">
                    Ravi de vous revoir, {{ customer.surname }}. <br>
                    Un code vient de vous être envoyé par e-mail.
                </p>
            </div>

            <form data-turbo="false" method="POST" class="space-y-8">

                <div class="space-y-3">
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 ml-2">
                        Code de vérification (6 chiffres)
                    </label>
                    <input type="text"
                           name="verification_code"
                           maxlength="6"
                           placeholder="000000"
                           required
                           class="w-full px-6 py-5 bg-blue-50/30 border-2 border-blue-100 focus:border-blue-500 focus:bg-white text-center text-3xl font-black tracking-[0.5em] text-blue-600 rounded-2xl transition-all outline-none placeholder:text-blue-100">
                </div>

                <div class="space-y-3">
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 ml-2">
                        Choisissez votre mot de passe
                    </label>
                    <div class="relative">
                        <input type="password"
                               name="password"
                               required
                               placeholder="••••••••••••"
                               class="w-full px-6 py-5 bg-slate-50 border border-slate-100 focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 rounded-2xl transition-all outline-none font-medium">
                    </div>
                    <p class="text-[10px] text-slate-400 italic ml-2">
                        Minimum 8 caractères conseillés.
                    </p>
                </div>

                <div class="pt-4">
                    <button type="submit" class="w-full py-5 bg-blue-600 hover:bg-blue-700 text-white font-black uppercase tracking-widest rounded-2xl transition-all shadow-lg shadow-blue-200 transform active:scale-[0.98]">
                        Activer mon accès
                    </button>
                </div>

                <div class="text-center space-y-4">
                    <p class="text-[10px] text-slate-400 font-medium px-4 leading-relaxed">
                        En activant votre compte, vous pourrez signer vos contrats et consulter vos factures en ligne.
                    </p>
                </div>
            </form>

        </div>
    </div>
{% endblock %}
