{% extends 'layouts/guest.html.twig' %}

{% block title %}Vérification 2FA{% endblock %}

{% block guest_content %}
<div>
    <div class="text-center mb-8">
        <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
            </svg>
        </div>
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">
            Authentification à deux facteurs
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Entrez le code envoyé à votre adresse email
        </p>
    </div>

    <form method="post" class="space-y-6" data-controller="2fa-code login-form" data-action="submit->login-form#handleSubmit">
        <div>
            <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Code de vérification
            </label>
            <input
                type="text"
                id="code"
                name="code"
                required
                autofocus
                maxlength="6"
                pattern="[0-9]{6}"
                data-2fa-code-target="input"
                data-action="input->2fa-code#handleInput paste->2fa-code#handlePaste"
                class="appearance-none block w-full px-4 py-3 border-2 border-gray-900 dark:border-gray-500 rounded-lg shadow-md text-center text-2xl font-mono tracking-widest placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-400 bg-white dark:bg-gray-700 dark:text-white"
                placeholder="000000">
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400 text-center">
                Le code expire dans <span data-2fa-code-target="countdown" class="font-semibold">5</span> minutes
            </p>
        </div>

        <div>
            <button
                type="submit"
                data-login-form-target="submit"
                class="w-full flex justify-center items-center py-3 px-4 rounded-lg text-sm font-semibold text-white bg-black hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-800 border-2 border-black dark:border-white transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-[0.98]">
                <span data-login-form-target="buttonText" class="transition-all duration-200">Vérifier</span>
                <span data-login-form-target="spinner" class="hidden ml-2 animate-spin">
                    <svg class="h-5 w-5 text-white dark:text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </span>
            </button>
        </div>

        <div class="space-y-3">
            <div class="text-center text-sm">
                <button
                    type="button"
                    data-action="click->2fa-code#resendCode"
                    data-2fa-code-target="resendButton"
                    class="text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 underline font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-opacity">
                    Renvoyer le code
                </button>
            </div>

            <div data-2fa-code-target="resendCountdown" class="hidden text-center text-sm text-gray-600 dark:text-gray-400">
                Vous pourrez renvoyer le code dans <span data-2fa-code-target="resendSeconds" class="font-semibold">60</span> secondes
            </div>

            <div data-2fa-code-target="resendMessage" class="hidden text-center text-sm"></div>

            <div class="text-center text-sm">
                <a href="{{ path('app_login') }}" class="text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 underline">
                    Retour à la connexion
                </a>
            </div>
        </div>
    </form>
</div>
{% endblock %}