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

{% block body %}
<div class="w-full flex flex-col">
    <div class="flex flex-row items-center w-full 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>
                Événements
            </a>
            
        </div>
    </div>

    <div class="w-full h-[83vh] flex flex-row overflow-y-auto p-5">
        <!-- Liste des événements -->
        <div class="h-full flex flex-col mr-2 w-3/12">
            <div class="w-full p-3 mb-2 bg-gray-100 flex flex-row items-center justify-between rounded-xl border-4">
                <input id="select-date" type="date" class="border rounded-lg px-4 py-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 id="external-events" class="h-full flex flex-col rounded-xl border-4 w-full">
                <div class="flex w-full py-4 bg-gray-100 font-semibold items-center justify-center rounded-t-xl">
                    Mes événements
                    <a class="flex items-center ml-4 px-2 py-2 bg-bungalow-yellow text-white font-medium rounded-full text-sm cursor-pointer" data-modal-target="create_evenement"><i class="fas fa-plus"></i></a>
                </div>
                <hr class="h-1 w-full bg-slate-500">
                <div id="events" class="w-full py-3 flex flex-col items-center overflow-y-auto">
                    {% if events %}
                        {% for event in events %}
                            <div class="fc-event w-11/12 pl-3 rounded-lg py-1 my-1 bg-bungalow-blue text-white truncate"
                                data-id="{{ event.id }}"
                                data-title="{{ event.title }}"
                                data-description="{{ event.description }}"
                                data-duration="02:00:00">
                                {{ event.title }}
                            </div>
                        {% endfor %}
                    {% else %}
                        <p>Aucun événement disponible</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div id="calendar-wrapper" class="relative w-full h-full">
            <div id="calendar-holder" class="p-4 rounded-xl w-full border-4 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 modals %}
    {% include "./formation/evenements/modals/create.html.twig" %}
    {% include "./formation/evenements/modals/edit.html.twig" %}
    {% include "./formation/evenements/modals/capacite.html.twig" %}
{% endblock %}

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

{% block stylesheets %}
    <style>
        /* Style des événements externes */
        .fc-event {
            cursor: grab;
            padding: 5px;
            text-align: center;
        }

        .calendar-loader {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: inline-block;
            border-top: 4px solid #2D7979;
            border-right: 4px solid transparent;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
            position: relative;
        }

        .calendar-loader::after {
            content: '';
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border-bottom: 4px solid #E7B40E;
            border-left: 4px solid transparent;
        }

        @keyframes rotation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

    </style>
{% endblock %}