{% extends 'base.twig' %}

{% block title %}Configuration Sécurité 2FA - Ludikevent{% endblock %}

{% block body %}
    <div class="min-h-screen flex items-center justify-center bg-[#F8FAFC] py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full bg-white rounded-[2.5rem] p-10 shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-gray-100">

            {# Logo et En-tête #}
            <div class="flex flex-col items-center mb-10">
                <img src="{{ asset('provider/images/logo.png') }}" class="h-12 w-auto mb-8" alt="Ludikevent"/>

                <div class="inline-flex items-center space-x-2 px-3 py-1 bg-indigo-50 rounded-full mb-4">
                    <span class="w-2 h-2 bg-indigo-500 rounded-full animate-pulse"></span>
                    <span class="text-[10px] font-bold text-indigo-600 uppercase tracking-widest">Sécurisation en cours</span>
                </div>

                <h1 class="text-2xl font-black text-slate-900 uppercase tracking-tight text-center">
                    Double Authentification
                </h1>
                <p class="text-slate-400 text-sm text-center mt-2 px-4">
                    Scannez le code QR pour lier votre compte à une application de sécurité.
                </p>
            </div>

            {# Zone QR Code #}
            <div class="flex flex-col items-center justify-center mb-10">
                <div class="relative p-6 bg-white border-2 border-dashed border-gray-100 rounded-[2rem]">
                    <img src="{{ qrCodeUrl }}" class="w-44 h-44" alt="QR Code 2FA"/>

                    {# Petits coins décoratifs pour simuler un scanner #}
                    <div class="absolute top-4 left-4 w-4 h-4 border-t-2 border-l-2 border-indigo-500 rounded-tl-lg"></div>
                    <div class="absolute top-4 right-4 w-4 h-4 border-t-2 border-r-2 border-indigo-500 rounded-tr-lg"></div>
                    <div class="absolute bottom-4 left-4 w-4 h-4 border-b-2 border-l-2 border-indigo-500 rounded-bl-lg"></div>
                    <div class="absolute bottom-4 right-4 w-4 h-4 border-b-2 border-r-2 border-indigo-500 rounded-br-lg"></div>
                </div>

                <div class="mt-6 flex items-center space-x-2 text-slate-400">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                    </svg>
                    <span class="text-[11px] font-medium italic">Ouvrez Google Authenticator ou FreeOTP</span>
                </div>
            </div>

            {# Formulaire de Validation #}
            <form data-turbo="false" method="post" class="space-y-6">
                {% for message in app.flashes('error') %}
                    <div class="p-4 bg-rose-50 text-rose-600 text-xs font-bold rounded-2xl border border-rose-100 text-center animate-shake">
                        {{ message }}
                    </div>
                {% endfor %}

                <div>
                    <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 text-center mb-4">
                        Saisissez le code à 6 chiffres
                    </label>
                    <input type="text"
                           name="_check_code"
                           maxlength="6"
                           required
                           placeholder="· · · · · ·"
                           inputmode="numeric"
                           pattern="[0-9]*"
                           autocomplete="one-time-code"
                           class="w-full bg-slate-50 border-2 border-transparent focus:border-indigo-500 focus:bg-white focus:ring-0 rounded-2xl py-4 text-center text-3xl font-mono tracking-[0.3em] text-slate-800 transition-all outline-none">
                </div>

                <button type="submit" class="w-full py-4 bg-slate-900 hover:bg-indigo-600 text-white rounded-2xl font-bold uppercase text-xs tracking-[0.2em] shadow-xl shadow-slate-200 transition-all transform hover:scale-[1.02] active:scale-[0.98]">
                    Confirmer l'activation
                </button>
            </form>

            <div class="mt-8 text-center">
                <a href="{{ path('app_home') }}" class="text-xs font-bold text-slate-300 hover:text-slate-500 transition-colors uppercase tracking-widest">
                    Annuler la configuration
                </a>
            </div>
        </div>
    </div>

    <style>
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        .animate-shake { animation: shake 0.2s ease-in-out 0s 2; }
    </style>
{% endblock %}
