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

{% block title %}Verification - Avis {{ advert.orderNumber.numOrder }} - Association E-Cosplay{% endblock %}

{% block body %}
<main class="max-w-lg mx-auto px-4 py-16">
    {% for t, messages in app.flashes %}
        {% for message in messages %}
            <div class="mb-4 p-4 glass font-medium text-sm {{ t == 'success' ? 'border-2 border-green-600 text-green-800' : 'border-2 border-red-600 text-red-800' }}">{{ message }}</div>
        {% endfor %}
    {% endfor %}

    <div class="glass p-8">
        <h1 class="text-2xl font-black uppercase tracking-tighter mb-2">Verification de securite</h1>
        <p class="text-sm text-gray-600 mb-6">
            Pour acceder a l'avis de paiement <strong class="font-mono">{{ advert.orderNumber.numOrder }}</strong>, un code a 6 chiffres a ete envoye a <strong>{{ customer.email|slice(0, 3) }}***@{{ customer.email|split('@')[1] }}</strong>.
        </p>

        {% if error %}
            <div class="mb-4 p-3 bg-red-50 border-2 border-red-600 text-red-700 text-sm font-bold">{{ error }}</div>
        {% endif %}

        <form method="post" action="{{ path('app_order_verify', {numOrder: numOrder}) }}" class="flex flex-col gap-4">
            <div>
                <label for="code" class="text-xs font-black uppercase block mb-2">Code de verification</label>
                <input type="text" id="code" name="code" required maxlength="6" pattern="[0-9]{6}" placeholder="000000"
                       class="w-full px-4 py-4 input-glass text-2xl font-mono font-black text-center tracking-[0.5em]" autocomplete="one-time-code" inputmode="numeric">
            </div>
            <button type="submit" class="px-6 py-3 btn-gold font-black uppercase text-sm tracking-widest">
                Valider
            </button>
        </form>

        <div class="flex items-center justify-between mt-4">
            <p class="text-[10px] text-gray-400">Le code expire dans 15 minutes.</p>
            <form method="post" action="{{ path('app_order_verify_resend', {numOrder: numOrder}) }}" class="inline">
                <button type="submit" class="text-[10px] text-indigo-600 font-bold uppercase hover:underline">Renvoyer le code</button>
            </form>
        </div>
    </div>
</main>
{% endblock %}
