{% 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>
                Mon calendrier
            </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 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 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">
                        Supprimer
                    </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">Rechercher</button>
                </div>
            </div>
        </div> #}
            
        <div id="calendar-holder" class="p-4 rounded-xl w-full border-4 flex-1 min-h-0"></div>
    </div>
</div>
{% endblock %}

{% block modals %}
    {# {% include "./formation/suivi_evenements/modals/event.html.twig" %} #}
{% endblock %}

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

{% block stylesheets %}
    <style>
        .fc-event {
            padding: 5px;
            text-align: center;
        }
    </style>
{% endblock %}