{% 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">Utilisateurs</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>
        <a href="{{ path('app_admin_reset')}}"><button class="p-2 rounded bg-yellow-500 hover:bg-yellow-600 text-white border-yellow-700 mx-1 mb-8">Réinitialiser</button></a>

    </div>
    {% for type, messages in app.session.flashbag.all() %}
        {% for message in messages %}
            <div class="flex p-2 bg-green-200 text-green-800 p-4 text-sm rounded border border-green-300 my-3 m-auto w-10/12">
                <div class="flex-shrink mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div class="flex-grow">{{message}}</div>
            </div>           
        {% endfor %}
    {% endfor %}
    <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">Fonction</th>
                <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Adresse mail</th>
                <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Jour(s) restant</th>
                <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Jour(s) pris</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 usr in AllUsers %}
            <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">Id</span>
                    {{ usr.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">Fonction</span>
                    {{ usr.user.getFonction() }}
                </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">Mail</span>
                    {{ usr.user.getEmail() }}
                </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">Restant</span>
                    {{ usr.getRemainingDays }}
                </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">Pris</span>
                    {{ usr.getTotalDays - usr.getRemainingDays }}
                </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_change', {'id': usr.user.getId()}) }}"><button class="p-2 rounded bg-blue-500 hover:bg-blue-600 text-white border-blue-700 mx-1">Modifier</button></a>
                </td>

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