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

{% block title %}Paiement effectue - {{ echeancier.reference }} - 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-lg overflow-hidden">
        <div class="glass-dark text-white px-8 py-6">
            <div class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-400" 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>
                    <h1 class="text-lg font-bold uppercase tracking-widest">Paiement effectue</h1>
                    <p class="text-xs text-white/60">{{ echeancier.reference }}</p>
                </div>
            </div>
        </div>

        <div class="p-8 text-center">
            <p class="text-sm text-gray-600 mb-4">
                Votre echeance <strong>{{ line.label }}</strong> a ete regularisee avec succes par carte bancaire.
            </p>
            <div class="glass p-4 mb-4 text-left">
                <p class="text-xs text-gray-500"><strong>Reference :</strong> {{ echeancier.reference }}</p>
                <p class="text-xs text-gray-500"><strong>Echeance :</strong> {{ line.position }}/{{ echeancier.nbLines }}</p>
                <p class="text-xs text-gray-500"><strong>Montant paye :</strong> {{ line.amount|number_format(2, ',', ' ') }} &euro;</p>
            </div>
            <p class="text-xs text-gray-400">
                Vous recevrez un email de confirmation lorsque le paiement sera traite.
            </p>
            <p class="text-xs text-gray-400 mt-4">
                Pour toute question : <a href="mailto:client@e-cosplay.fr" class="font-bold" style="color: #fabf04;">client@e-cosplay.fr</a>
            </p>
        </div>
    </div>
</div>
{% endblock %}
