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

{% block body %}
<div class="w-full flex flex-col">
    {% include "./layouts/message_flash.html.twig" %}
    <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>
                Calendrier des Réservations - {{ event.title }} - {{ plage.startAt|date('d/m/Y') }} - {{ plage.startAt|date('H:i') }} à {{ plage.endAt|date('H:i') }}
            </a>
        </div>
    </div>
    <div class="w-full h-[83vh] flex flex-col overflow-y-auto px-5 py-2">
        {% include "./formation/hotel/reservation/partials/informations.html.twig" %}
        <div class="my-6 w-full bg-white shadow-lg rounded-md">
            {% include "./formation/hotel/reservation/partials/participants.html.twig" %}
        </div>
    </div>
</div>
{% endblock %}

{% block modals %}

{% endblock %}

{% block javascripts %}
    <!-- FullCalendar Core -->
    {{ encore_entry_script_tags('hotel_reservation') }}
{% endblock %}