{% extends 'revervation/base.twig' %}

{% block title %}Paiement annulé - #{{ contrat.numReservation }}{% endblock %}

{% block body %}
    <div class="min-h-screen bg-slate-50 flex items-center justify-center py-12 px-4">
        <div class="max-w-md w-full">
            <div class="bg-white rounded-[3rem] p-10 shadow-xl border border-slate-100 text-center relative overflow-hidden">

                {# Décoration subtile #}
                <div class="absolute -top-10 -right-10 w-32 h-32 bg-amber-50 rounded-full blur-3xl"></div>

                {# Icône Annulation #}
                <div class="w-20 h-20 bg-amber-50 text-amber-500 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-sm border border-amber-100">
                    <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="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </div>

                <h1 class="text-3xl font-black uppercase italic text-slate-900 leading-tight">
                    Paiement <span class="text-amber-500">interrompu</span>
                </h1>

                <p class="mt-4 text-slate-500 font-medium italic text-sm leading-relaxed">
                    Le processus de règlement de l'acompte pour la réservation <span class="text-slate-900 font-bold">#{{ contrat.numReservation }}</span> a été annulé.
                    Aucun montant n'a été débité de votre compte.
                </p>

                <div class="mt-10 space-y-4">
                    {# Bouton Retour à la gestion #}
                    <a href="{{ path('gestion_contrat_view', {'num': contrat.numReservation}) }}"
                       class="group flex items-center justify-center gap-3 bg-slate-900 text-white px-8 py-5 rounded-2xl font-black uppercase italic hover:bg-blue-600 transition-all shadow-lg">
                        <svg class="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        Retourner au contrat
                    </a>

                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">
                        Besoin d'aide ? Contactez-nous au 06 14 17 24 47
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
