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

{% block title %}Verification attestation - Association E-Cosplay{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center p-4" style="background: linear-gradient(135deg, #f5f5f0 0%, #e8e8e0 100%);">
    <div class="glass-heavy w-full max-w-2xl overflow-hidden">
        <div class="glass-dark text-white px-8 py-6">
            <div class="flex items-center gap-3">
                <img src="/logo.jpg" alt="E-Cosplay" class="h-10 w-auto">
                <div>
                    <h1 class="text-lg font-bold uppercase tracking-widest">Verification d'attestation</h1>
                    <p class="text-xs text-white/60">Association E-Cosplay</p>
                </div>
            </div>
        </div>

        <div class="p-8">
            {% if valid and attestation %}
                {# Attestation valide #}
                <div class="glass p-4 mb-6 flex items-center gap-3" style="border-left: 4px solid #16a34a;">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div>
                        <p class="text-sm font-bold text-green-700">Attestation authentique et verifiee</p>
                        <p class="text-xs text-gray-500 mt-1">Ce document a ete emis par l'Association E-Cosplay et son integrite est confirmee.</p>
                    </div>
                </div>

                <div class="glass p-5 mb-6">
                    <h2 class="text-sm font-bold uppercase tracking-wider mb-4">{{ attestation.title }}</h2>

                    <p class="text-sm text-gray-600 mb-4 italic">
                        "Je soussigne(e), President(e) de l'Association E-Cosplay et le bureau de l'association, atteste les elements suivants :"
                    </p>

                    <div class="space-y-2 mb-4">
                        {% for item in attestation.items %}
                            <div class="flex items-start gap-3 glass p-3">
                                <span class="text-xs font-bold text-gray-400 mt-0.5">{{ loop.index }}.</span>
                                <p class="text-sm text-gray-700">{{ item }}</p>
                            </div>
                        {% endfor %}
                    </div>

                    <p class="text-sm text-gray-600 italic">
                        "La presente attestation est etablie pour faire valoir les droits de l'Association E-Cosplay. Les elements presentes ci-dessus sont conformes et veridiques."
                    </p>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                    <div class="glass p-3">
                        <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Reference</p>
                        <p class="font-mono font-bold text-xs mt-1">{{ attestation.reference }}</p>
                    </div>
                    <div class="glass p-3">
                        <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Emise le</p>
                        <p class="font-bold text-xs mt-1">{{ attestation.createdAt|date('d/m/Y') }}</p>
                    </div>
                    <div class="glass p-3">
                        <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Statut</p>
                        {% if attestation.state == 'signed' %}
                            <p class="font-bold text-xs mt-1 text-green-600">Signee electroniquement</p>
                        {% else %}
                            <p class="font-bold text-xs mt-1 text-yellow-600">Brouillon</p>
                        {% endif %}
                    </div>
                    {% if attestation.signedAt %}
                        <div class="glass p-3">
                            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Signee le</p>
                            <p class="font-bold text-xs mt-1">{{ attestation.signedAt|date('d/m/Y H:i') }}</p>
                        </div>
                    {% endif %}
                </div>

                <div class="glass p-3 mb-4">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Code HMAC d'integrite</p>
                    <p class="font-mono text-[10px] text-gray-500 break-all">{{ attestation.hmac }}</p>
                </div>

            {% else %}
                {# Attestation invalide #}
                <div class="glass p-4 mb-6 flex items-center gap-3" style="border-left: 4px solid #dc2626;">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div>
                        <p class="text-sm font-bold text-red-700">Attestation non valide</p>
                        <p class="text-xs text-gray-500 mt-1">Ce document n'a pas pu etre verifie. Il est possible qu'il ait ete falsifie ou que le lien soit incorrect.</p>
                    </div>
                </div>

                <p class="text-sm text-gray-600 mb-4">
                    Si vous pensez qu'il s'agit d'une erreur, veuillez contacter l'Association E-Cosplay.
                </p>
            {% endif %}

            <p class="text-center text-xs text-gray-400 mt-6">
                Pour toute question : <a href="mailto:contact@e-cosplay.fr" class="font-bold" style="color: #fabf04;">contact@e-cosplay.fr</a>
            </p>
        </div>
    </div>
</div>
{% endblock %}