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

{% block title %}LALD / LCDL{% endblock %}

{% block body %}
<!-- component -->
<div class="h-auto min-h-screen mb-8" >
    <div class="container mx-auto text-center pt-20">
        <h2 class="block antialiased tracking-normal font-sans text-4xl font-semibold leading-[1.3] text-blue-gray-900 mb-4">Toutes les demandes</h2>
        <p class="block antialiased font-sans text-base leading-relaxed text-inherit font-normal !text-gray-500"> {{user.username}}<br>{{ fonction }}</p>
        <a href="{{ path('app_member_home')}}"><button class="p-2 rounded bg-gray-500 hover:bg-gray-600 text-white border-gray-700 mx-1 mb-8">Accueil</button></a>
    </div>
    <table class="border-collapse w-10/12 m-auto">
        <thead>
            <tr>
                <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Nom et Prénom</th>
                <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Date de début</th>
                <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Date de fin</th>
                <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">État</th>
                <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Date de la demande</th>
                <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Date de la réponse</th>
                <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for request in vacations %}
            <tr class="bg-white lg:hover:bg-gray-100 flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0">
                <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">
                    <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Date de début</span>
                    {{ request.user.getUsername() }}
                </td>
                <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">
                    <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Date de début</span>
                    {{ request.startDate|date("d/m/Y") }}
                </td>
                <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
                    <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Date de fin</span>
                    {{ request.endDate|date("d/m/Y") }}
                </td>
                <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
                    <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">État</span>
                    {% if request.state == 'pending' %}
                    <span class="rounded bg-yellow-400 py-1 px-3 text-xs font-bold">Analyse en cours</span>
                    {% elseif request.state == 'valid' %}
                    <span class="rounded bg-green-400 py-1 px-3 text-xs font-bold">Validé<span>
                    {% elseif request.state == 'refused' %}
                    <span class="rounded bg-red-400 py-1 px-3 text-xs font-bold">Refusé</span>
                    {% else %}
                    <span class="rounded bg-orange-400 py-1 px-3 text-xs font-bold">Annuler</span>
                    {% endif %}
                </td>
                <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
                    <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Date de la demande</span>
                    {{ request.submissionDate|date('d/m/Y à H:i:s') }}
                </td>
                <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
                    <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Date de la réponse</span>
                    {% if request.responseDate %}
                        {{ request.responseDate|date('d/m/Y à H:i:s') }}
                    {% else %}
                        <span class="rounded bg-gray-400 py-1 px-3 text-xs font-bold">En attente</span>
                    {% endif %}
                </td>
                <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
                    <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Actions</span>
                    <a href="{{ path('app_admin_request', {'id': request.id}) }}" class="text-blue-400 hover:text-blue-600 underline">Voir la demande</a>
                </td>

            {% endfor %}
            
        </tbody>
    </table>
</div>
{% endblock %}