{% extends 'base.html.twig' %}
{% block title %}Vérification email — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}

{% block body %}
{% embed '_organisms/step-layout/step-layout.html.twig' %}
{% block heading %}
<div class="w-full max-w-md text-center mb-4 sm:mb-8">
    <h1 class="text-xl sm:text-3xl font-bold text-gray-700 mb-2 leading-tight">Vérifiez votre email</h1>
    <p class="text-sm text-gray-500">Code envoyé à <span class="font-semibold text-gray-700">{{ email }}</span></p>
</div>
{% endblock %}
{% block card %}
    {% if error is defined and error %}
        <div class="error-message mb-6 p-3 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700 text-center">{{ error }}</div>
    {% endif %}
    {% if success is defined and success %}
        <div class="mb-6 p-3 bg-green-50 border border-green-200 rounded-xl text-sm text-green-700 text-center">{{ success }}</div>
    {% endif %}

    <form method="POST" action="{{ path('app_register_verify') }}"
          data-controller="otp-input">
        <input type="hidden" name="_token" value="{{ csrf_token('register_verify') }}">
        <input type="hidden" name="code" data-otp-input-target="hidden">

        <div class="flex gap-2 sm:gap-3 justify-center mb-4">
            {% for i in 1..6 %}
                <input type="text" inputmode="numeric" maxlength="1"
                       autocomplete="one-time-code"
                       aria-label="Chiffre {{ i }} sur 6"
                       data-otp-input-target="box"
                       data-action="input->otp-input#onInput keydown->otp-input#onKeydown paste->otp-input#onPaste"
                       class="w-11 h-11 sm:w-14 sm:h-14 p-0 appearance-none text-center text-xl sm:text-2xl font-semibold leading-[2.5rem] sm:leading-[3.25rem] bg-white border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition">
            {% endfor %}
        </div>

        <p class="text-xs text-gray-400 text-center mb-4 sm:mb-8">Auto-soumission • Valide 15 min</p>

        <button type="submit" class="sr-only" tabindex="-1" aria-label="Vérifier le code">Vérifier</button>
    </form>

    <form method="POST" action="{{ path('app_register_verify') }}" class="text-center"
          data-controller="resend-countdown"
          data-resend-countdown-delay-value="{{ resendCooldown ?? 0 }}">
        <input type="hidden" name="_token" value="{{ csrf_token('register_verify') }}">
        <input type="hidden" name="action" value="resend">
        <button type="submit"
                data-resend-countdown-target="button"
                class="text-sm text-primary hover:underline font-medium cursor-pointer">
            <span data-resend-countdown-target="label">Renvoyer le code</span>
        </button>
    </form>
{% endblock %}
{% block bottom %}
<div class="fixed bottom-0 left-0 right-0 pb-6 text-center text-xs text-gray-400 z-10">
    <p>E-mail en cours de vérification : <span class="font-medium text-gray-500">{{ email }}</span></p>
    <a href="{{ path('app_register') }}" class="underline hover:text-gray-600 transition-colors">
        Utiliser une autre adresse e-mail
    </a>
</div>
{% endblock %}
{% endembed %}
{% endblock %}