{% extends 'base.twig' %}

{% block title %}
    Confirmation de Paiement | Votre Cotisation
{% endblock %}

{% block body %}
    <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
        <div class="max-w-xl w-full bg-white shadow-2xl rounded-lg overflow-hidden border-t-4 border-green-500">

            {# Header #}
            <div class="p-6 bg-green-500 text-white text-center">
                <svg class="w-16 h-16 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <h1 class="text-3xl font-bold">Paiement Reçu !</h1>
                <p class="text-green-100 mt-1">Confirmation de votre Cotisation</p>
            </div>

            {# Body Content #}
            <div class="p-6 md:p-8 space-y-4">
                <p class="text-gray-700">Cher membre,</p>

                <p class="text-gray-800">
                    Nous vous remercions sincèrement. Le paiement de votre **cotisation** a été effectué avec succès et a été enregistré dans nos systèmes.
                    Votre compte est désormais à jour.
                </p>

                {# Transaction Details #}
                <div class="bg-gray-50 border border-gray-200 p-4 rounded-lg">
                    <h2 class="text-lg font-semibold text-gray-800 mb-3 border-b pb-2">Détails de la transaction</h2>

                    <dl class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <dt class="font-medium text-gray-600">Montant payé :</dt>
                            <dd class="font-bold text-green-600">{{ payment.amount|number_format(2, ',', ' ') }} €</dd>
                        </div>
                    </dl>
                </div>

                {# Footer Text #}
                <p class="pt-4 text-gray-600 border-t mt-6">
                    Pour toute question concernant cette transaction ou votre adhésion, n'hésitez pas à contacter notre support.
                </p>

                <p class="text-gray-700 font-semibold">
                    Cordialement,<br>
                    L'équipe E-Cosplay
                </p>
            </div>

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