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

{% block body %}
<div class="w-full h-full flex flex-col min-h-0">
    <!-- En-tête -->
    <div class="flex flex-row items-center w-full h-[8%] p-3 border-b text-white bg-bungalow-yellow">
        <div class="flex flex-row w-full justify-between items-center">
            <a class="text-white text-lg">
                <i class="{{ icon.get('calendrier') }}" style="color: #FFFF;"></i>
                Suivi des événements
            </a>
        </div>
    </div>

    <!-- Contenu principal qui doit occuper l'espace restant -->
    <div class="w-full h-[92%] flex flex-col min-h-0 overflow-hidden px-5 py-2">
        <!-- Ligne 1 : Contrôles (hauteur fixe) -->
        <div class="w-full grid grid-cols-3 gap-4 h-fit">
            <div class="w-full px-3 mb-2 bg-gray-100 flex flex-row items-center rounded-xl border-4">
                <div class="flex justify-between w-full">
                    <input id="select-date" type="date" class="border w-full rounded-lg px-4 py-2 mr-2 text-sm" />
                    <button id="goto-date" class="bg-bungalow-blue text-white font-medium px-4 py-2 rounded-lg text-sm">Aller</button>
                </div>
            </div>
            <div class="col-span-2 p-3 mb-2 bg-gray-100 flex flex-row items-center justify-between rounded-xl border-4">
                <div class="flex col-span-2 w-1/3">
                    <select id="event-select" class="border w-full rounded-lg px-4 py-2 text-sm">
                        <option class="text-gray-400" value="" hidden selected disabled>Evenement</option>
                        {% for event in events %}
                            <option value="{{ event.id }}">{{event.title}}</option>
                        {% endfor %}
                    </select>
                </div>
                <hr class="h-full w-0.5 mx-4 bg-gray-300">
                <div class="flex col-span-2 w-1/3">
                    <select id="localisation-select" class="border w-full rounded-lg px-4 py-2 text-sm">
                        <option class="text-gray-400" value="" hidden selected disabled>Localisation</option>
                        {% for key, localisation in localisations %}
                            <option value="{{ key }}">{{localisation}}</option>
                        {% endfor %}
                    </select>
                </div>
                <hr class="h-full w-0.5 mx-4 bg-gray-300">
                <div class="flex w-1/5">
                    <input type="number" id="capacity" min="1" max="{{max_capacity}}" class="border min-w-full rounded-lg px-4 py-2 text-sm" placeholder="Capacité" />
                </div>
                <hr class="h-full w-0.5 mx-4 bg-gray-300">
                <div class="flex justify-evenly w-1/3">
                    <button type="button" id="remove" class="mx-1 text-white bg-red-500 font-medium px-4 py-2 rounded-lg text-sm">
                        <i class="{{ icon.get('trash') }}"></i>
                    </button>
                    <button type="button" id="reload" class="mx-1 text-white bg-blue-700 font-medium px-4 py-2 rounded-lg text-sm">
                        <i class="{{ icon.get('reload') }}"></i>
                    </button>
                    <button id="search-button" class="mx-1 bg-bungalow-blue text-white font-medium px-4 py-2 rounded-lg text-sm"><i class="{{ icon.get('search') }}"></i></button>
                </div>
            </div>
        </div>

        <!-- Ligne 2 : Légende (hauteur fixe) -->
        <div class="w-full grid grid-cols-6 gap-4 h-fit py-2 mb-2 bg-gray-100 items-center rounded-xl border-4 flex-none">
            <h2 class="underline font-bold text-center">Légende</h2>
            <div class="flex items-center justify-center">
                <i class="{{ icon.get('lock') }} text-red-700"></i>
                <p class="ml-3">Inscriptions closes</p>
            </div>
            <div class="flex items-center justify-center">
                <div class="w-4 h-4 rounded-full bg-green-400"></div>
                <p class="ml-3">En ligne</p>
            </div>
            <div class="flex items-center justify-center">
                <div class="w-4 h-4 rounded-full bg-orange-400"></div>
                <p class="ml-3">Hors ligne</p>
            </div>
            <div class="flex items-center justify-center">
                <div class="w-4 h-4 rounded-full bg-blue-400"></div>
                <p class="ml-3">Complet</p>
            </div>
            <div class="flex items-center justify-center">
                <div class="w-4 h-4 rounded-full bg-gray-400"></div>
                <p class="ml-3">Expiré</p>
            </div>
        </div>

        <div id="calendar-wrapper" class="w-full rounded-xl flex-1 min-h-0 h-full border-4 relative">
            <div id="calendar-holder" class="p-4 rounded-xl w-full h-full"></div>
            <span id="calendar-loader" class="hidden absolute top-0 left-0 w-full h-full bg-white bg-opacity-70 z-50 flex items-center justify-center">
                <span class="calendar-loader"></span>
            </span>
        </div>
    </div>
</div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('suivi_evenements') }}
{% endblock %}

{% block modals %}
    {% include "./formation/suivi_evenements/modals/event.html.twig" %}
    {% include "./formation/suivi_evenements/modals/participant/edit.html.twig" %}
    {% include "./formation/suivi_evenements/modals/participant/create.html.twig" %}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('suivi_evenements') }}
{% endblock %}