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

{% block title %}Verification RGPD - 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 par email</h1>
        <p class="text-sm text-gray-600 mb-6">
            Un code a 6 chiffres a ete envoye a <strong>{{ email }}</strong>.<br>
            Saisissez-le ci-dessous pour valider votre demande de
            {% if type == 'access' %}
                <strong>droit d'acces</strong>.
            {% else %}
                <strong>droit a l'effacement</strong>.
            {% endif %}
        </p>

        <form method="post" action="{{ path('app_legal_rgpd_verify', {type: type, email: email, ip: ip}) }}" class="flex flex-col gap-4">
            <input type="hidden" name="type" value="{{ type }}">
            <input type="hidden" name="email" value="{{ email }}">
            <input type="hidden" name="ip" value="{{ ip }}">
            <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>

        <p class="text-[10px] text-gray-400 mt-4 text-center">Le code expire dans 15 minutes. Si vous ne l'avez pas recu, verifiez vos spams.</p>
    </div>
</main>
{% endblock %}
