{% extends 'base.twig' %}

{% block title %}Erreur de configuration 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 text-center">

            {# Logo Ludikevent #}
            <div class="flex justify-center mb-8">
                <img src="{{ asset('provider/images/logo.png') }}" class="h-12 w-auto" alt="Ludikevent"/>
            </div>

            {# Icône d'alerte stylisée avec un fond doux #}
            <div class="w-20 h-20 bg-rose-50 text-rose-500 rounded-[2rem] flex items-center justify-center mx-auto mb-6 shadow-inner">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
            </div>

            {# Titre d'erreur #}
            <h1 class="text-2xl font-black text-slate-900 uppercase tracking-tighter leading-none mb-3">
                Lien Invalide
            </h1>

            {# Séparateur visuel #}
            <div class="h-1 w-8 bg-rose-500 mx-auto mb-6 rounded-full"></div>

            {# Message dynamique #}
            <p class="text-slate-400 text-sm leading-relaxed mb-10 px-4">
                {{ message|default("Ce lien de configuration est expiré, corrompu ou a déjà été utilisé pour sécuriser ce compte.") }}
                <br><br>
                <span class="text-[10px] font-bold uppercase tracking-widest bg-slate-50 text-slate-500 px-4 py-1.5 rounded-full border border-slate-100">
                Action de sécurité requise
            </span>
            </p>

            {# Boutons d'action #}
            <div class="space-y-4">
                <a href="{{ path('app_home') }}"
                   class="block w-full py-4 bg-slate-900 text-white rounded-2xl font-bold hover:bg-indigo-600 hover:scale-[1.02] transition-all shadow-xl shadow-slate-200 uppercase text-xs tracking-[0.2em]">
                    Retour à la connexion
                </a>

                <div class="pt-4">
                    <p class="text-[10px] text-slate-300 uppercase tracking-widest font-bold">
                        Besoin d'aide ? <a href="mailto:contact@ludikevent.fr" class="text-indigo-400 hover:text-indigo-600 transition-colors">Contactez le support</a>
                    </p>
                </div>
            </div>

        </div>
    </div>
{% endblock %}
