{# ========================================
   CONFIRMATION DE RÉSERVATION
   Affiche le récapitulatif après création d'une réservation
   ======================================== #}
{% extends 'base.twig' %}

{% block title %}Confirmation - Nautiloc{% endblock %}

{% block content %}
<section class="mx-auto max-w-3xl rounded-2xl border-4 border-abyss-900 bg-white p-8 text-center shadow-[8px_8px_0_0_#041824]">
    <p class="text-xs font-black uppercase tracking-wider text-abyss-800">Réservation confirmée</p>
    <h1 class="mt-2 text-3xl font-black uppercase md:text-4xl">Votre réservation est dans la boîte à moussaillons.</h1>
    <p class="mt-3 text-sm font-semibold">Numéro : <span class="rounded-md border-2 border-abyss-900 bg-sand-100 px-2 py-1 font-black">{{ reservation.numero }}</span></p>

    <div class="mt-6 grid gap-3 rounded-xl border-2 border-abyss-900 bg-sand-100 p-4 text-left text-sm">
        <p><span class="font-black">Bateau :</span> {{ reservation.bateau_nom }}</p>
        <p><span class="font-black">Port :</span> {{ reservation.port_nom }}</p>
        <p><span class="font-black">Date :</span> {{ reservation.date_depart|date('d/m/Y') }}</p>
        <p><span class="font-black">Formule :</span> {{ reservation.formule_libelle }}</p>
        <p><span class="font-black">Statut :</span> {{ reservation.statut }}</p>
    </div>

    <div class="mt-6 flex flex-wrap justify-center gap-3">
        <a href="/catalogue" class="rounded-lg border-2 border-abyss-900 bg-white px-4 py-2 text-xs font-black uppercase shadow-[3px_3px_0_0_#041824]">Retour catalogue</a>
        <a href="/mes-reservations" class="rounded-lg border-2 border-abyss-900 bg-coral-500 px-4 py-2 text-xs font-black uppercase text-white shadow-[3px_3px_0_0_#041824]">Retrouver mes réservations</a>
    </div>
</section>
{% endblock %}