{# templates/registration/verify_otp.html.twig #}
{% extends 'frontend/base_front.html.twig' %}

{% block title %}🔒 Entrez votre code de vérification{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* Animation de confettis en fond */
        @keyframes confetti {
            0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(200px) rotate(360deg); opacity: 0; }
        }
        .confetti {
            position: absolute;
            width: 8px; height: 8px;
            top: 0; left: 50%;
            animation: confetti 3s infinite;
            opacity: 0.8;
        }
        {% for i in 1..20 %}
        .confetti:nth-child({{ i }}) {
            left: {{ (random() * 80) + 10 }}%;
            background: hsl({{ random() * 360 }}, 80%, 70%);
            animation-delay: {{ random() * 2 }}s;
            animation-duration: {{ 2 + random() * 2 }}s;
        }
        {% endfor %}

        /* Style des inputs OTP */
        .otp-inputs input {
            width: 3rem;
            height: 3rem;
            font-size: 1.5rem;
            text-align: center;
            margin: 0 .25rem;
        }
    </style>
{% endblock %}

{% block main_content %}
    <section class="position-relative d-flex align-items-center justify-content-center py-5" style="min-height: 70vh; overflow: hidden;">
        {# Confettis en arrière-plan #}
        {% for i in 1..20 %}
            <div class="confetti"></div>
        {% endfor %}

        <div class="card shadow-lg rounded-4 p-5 mx-3 mx-md-0 text-center" style="max-width: 480px; width: 100%; z-index: 1; background: #fff;">
            <h1 class="display-5 fw-bold mb-3">🔒 Vérification du compte</h1>
            <p class="mb-4">
                Un code à 6 chiffres vous a été envoyé par e-mail.<br>
                Merci de le saisir ci-dessous pour confirmer votre compte.
            </p>

            <form method="post" action="{{ path('app_verify_otp') }}">
                {# Sécurité CSRF #}
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('verify-otp') }}">

                <div class="d-flex justify-content-center otp-inputs mb-4">
                    {% for idx in 1..6 %}
                        <input
                                type="text"
                                name="digit{{ idx }}"
                                maxlength="1"
                                pattern="\d"
                                inputmode="numeric"
                                required
                                oninput="if(this.value) { const next = this.nextElementSibling; next && next.focus(); }"
                        >
                    {% endfor %}
                </div>

                <button type="submit" class="btn btn-lg btn-primary px-5 py-2">
                    Valider le code
                </button>

                <div class="mt-3">
                    <a href="{{ path('app_resend_otp') }}" class="btn btn-link">
                        Renvoyer le code
                    </a>
                </div>
            </form>
        </div>
    </section>
{% endblock %}