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

{% block title %}Verification - E-Flex {{ eflex.reference }} - Association E-Cosplay{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center p-4" style="background: linear-gradient(135deg, #f5f5f0 0%, #e8e8e0 100%);">
    <div class="glass-heavy w-full max-w-md overflow-hidden">
        <div class="glass-dark text-white px-8 py-6 text-center">
            <h1 class="text-lg font-bold uppercase tracking-widest">Verification</h1>
            <p class="text-xs text-white/60 mt-1">{{ eflex.reference }} - Un code a ete envoye a {{ customer.email }}</p>
        </div>
        <div class="p-8">
            {% if error %}
                <div class="mb-4 p-3 bg-red-500/20 text-red-700 font-bold text-xs">{{ error }}</div>
            {% endif %}
            <p class="text-sm text-gray-600 mb-4">Saisissez le code de verification a 6 chiffres recu par email.</p>
            <form method="post" action="{{ path('app_eflex_verify', {id: eflex.id}) }}">
                <div class="mb-4">
                    <label for="code" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Code de verification</label>
                    <input type="text" id="code" name="code" maxlength="6" pattern="[0-9]{6}" required autofocus
                           class="input-glass w-full px-4 py-3 text-center text-2xl font-bold tracking-[0.5em]" placeholder="000000">
                </div>
                <button type="submit" class="w-full btn-gold px-4 py-3 font-bold uppercase text-xs tracking-wider text-gray-900">Verifier</button>
            </form>
            <p class="text-center text-xs text-gray-400 mt-4">Le code expire dans 15 minutes.</p>
            <form method="post" action="{{ path('app_eflex_resend_code', {id: eflex.id}) }}" class="mt-3 text-center">
                <button type="submit" class="text-xs font-bold uppercase tracking-wider text-gray-500 hover:text-gray-900 underline transition-all">Renvoyer le code</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}