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

{% block title %}Verification 2FA - SARL SITECONSEIL{% endblock %}

{% block header %}
    <header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
        <div class="flex justify-center items-center h-16">
            <a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
                <img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
            </a>
        </div>
    </header>
{% endblock %}

{% block body %}
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
    <div class="w-full max-w-md">
        <div class="glass-heavy overflow-hidden">
            <div class="bg-yellow-400 border-b border-white/20 p-6 text-center">
                <h1 class="text-2xl font-bold">Double authentification</h1>
            </div>
            <div class="p-8">
                {% if authenticationError %}
                    <div class="mb-6 p-4 glass border border-red-300 text-red-800 font-medium text-sm rounded-xl">
                        {{ authenticationError|trans(authenticationErrorData, 'SchebTwoFactorBundle') }}
                    </div>
                {% endif %}

                <p class="text-sm text-gray-600 mb-6">Ouvrez votre application d'authentification (Google Authenticator, Authy, etc.) et saisissez le code a 6 chiffres.</p>

                <form method="post" action="{{ checkPathUrl }}" class="flex flex-col gap-5">
                    <div>
                        <label for="code" class="block text-xs font-bold uppercase tracking-wider mb-2">Code OTP</label>
                        <input type="text" id="code" name="{{ authCodeParameterName }}" required maxlength="6" pattern="[0-9]{6}" autocomplete="one-time-code"
                               class="w-full px-4 py-3 input-glass text-sm font-medium text-center tracking-[0.5em]"
                               placeholder="000000">
                    </div>

                    {% if displayTrustedOption %}
                        <label for="trusted-device" class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" id="trusted-device" name="{{ trustedParameterName }}" class="accent-[#fabf04]">
                            <span class="text-xs font-bold">Faire confiance a cet appareil pendant 30 jours</span>
                        </label>
                    {% endif %}

                    {% if isCsrfProtectionEnabled %}
                        <input type="hidden" name="{{ csrfParameterName }}" value="{{ csrf_token(csrfTokenId) }}">
                    {% endif %}

                    <button type="submit"
                            class="w-full px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
                        Verifier
                    </button>
                </form>

                <a href="{{ logoutPath }}" class="block text-center mt-4 text-xs font-bold text-gray-500 hover:text-indigo-600 transition-colors">Annuler et se deconnecter</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}