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

{% block title %}Liste des réservation{{parent()}}{% endblock %}

{% block body %}
<div class="bg-gray-300 pt-4 pb-10">
<div class="container-fluid mb-6">
    <h1 class="font-bold text-4xl lg:text-2xl text-center mb-4">Liste des réservations</h1>
    <div class="overflow-x-auto mx-14">
    <table class="table border-2 border-gray-200 text-center px-10 w-4/5 lg:mx-auto lg:w-5/6 bg-white">
        <thead class="bg-slate-950 text-white">
            <tr class="border justify-center">
                <th class="border text-4xl lg:text-base py-6 px-6">Prénom</th>
                <th class="border text-4xl lg:text-base py-6 px-6">Nom</th>
                <th class="border text-4xl lg:text-base py-6 px-6">N°Téléphone</th>
                <th class="border text-4xl lg:text-base py-6 px-6">Mail</th>
                <th class="border text-4xl lg:text-base py-6 px-6">Date de la réservation</th>
                <th class="border text-4xl lg:text-base py-6 px-6">Commentaire</th>
                <th class="border text-4xl lg:text-base py-6 px-6">Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for reservation in reservations %}
            <tr>
                <td class="border text-4xl lg:text-base py-6">{{ reservation.firstName }}</td>
                <td class="border text-4xl lg:text-base py-6">{{ reservation.lastName }}</td>
                <td class="border text-4xl lg:text-base py-6">{{ reservation.phoneNumber }}</td>
                <td class="border text-4xl lg:text-base py-6">{{ reservation.mail }}</td>
                <td class="border text-4xl lg:text-base py-6">{{ reservation.reservedAt ? reservation.reservedAt|date('d/m/Y H:i') : '' }}</td>
                <td class="border text-4xl lg:text-base py-6">{{ reservation.comment }}</td>
                <td class="border text-4xl lg:text-base py-6">
                    <div class="flex flex-row justify-center">
                    <a href="{{ path('app_reservation_show', {'id': reservation.id}) }}" class="font-semibold text-3xl lg:text-lg btn bg-blue-500 py-2 lg:py-4 px-4 m-2 rounded shadow-sm">Voir</a>
                    <a href="{{ path('app_reservation_edit', {'id': reservation.id}) }}" class="font-semibold text-3xl lg:text-lg btn bg-orange-300 py-2 lg:py-4 px-4 m-2 rounded shadow-sm">Modifier</a>
                    </div>        
                </td>
            </tr>
        {% else %}
            <tr class="border justify-center">
                <td colspan="8" class="border text-4xl lg:text-base py-6">Pas de réservation trouvée</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
</div>
</div>
{% endblock %}