{# Template pour les plannings #}

{% set cols = event.getSpaces()|length +1 %}

{# début du block de grille #}
<div class="block">
    {# Nombre de colonnes = nombre d'espaces + colonne d'intro #}
    <div class="fixed-grid has-{{ cols }}-cols">
        <div class="grid is-gap-0">

            {# en-tête avec les noms des espaces #}
            <div class="cell planning-cell planning-cell-heading has-background-primary-light">
                Espaces
            </div>
            {% for space in event.getSpaces() %}
            <div class="cell planning-cell planning-cell-heading has-background-primary-light">
                {{ space.name }}
            </div>
            {% endfor %}

            {# On ajoute les horaires période par période #}
            {% for period in event.getPeriods() %}
                <div class="cell planning-cell planning-cell-wide is-col-span-{{ cols }}">
                    Période du {{ period.startOn|date('d/m/Y H:i', app_timezone) }} à {{ period.endOn|date('H:i', app_timezone) }}
                </div>

                {# On affiche tous les slots de la période, space par space #}
                {% for dateRef in this.getDateOrdered(period) %}
                    <div class="cell planning-cell planning-cell-heading has-background-primary-light">
                        {{ dateRef|date('H:i', app_timezone) }}
                    </div>
                    {% for space in event.getSpaces() %}
                        {# extraction du slot de cet espace, ce moment et cette période #}
                        {% set thisSlot = this.getThisSlot(dateRef, space, period) %}
                        
                        {# si le slot est Indisponible #}
                        {% if thisSlot.unavailable %}
                            {% if displayLocked %}
                            <div class="cell planning-cell planning-cell-locked" data-id="thisSlot.id">
                                <div class="icon"><twig:ux:icon name="bi:lock-fill" /></div>
                            </div>
                            {% else %}
                            <div class="cell planning-cell planning-cell-hidden">
                            </div>
                            {% endif %}
                        {% endif %}
                        {# si une partie est sur le slot #}
                        {# TODO : à compléter quand les parties seront ajoutées #}
                        {# si le slot est disponible et sans partie #}
                        {% if not thisSlot.unavailable %}
                            {% if pathEmptySlot %}
                            <a href="{{ path(pathEmptySlot, {id: thisSlot.id}) }}">
                            <div class="cell planning-cell planning-cell-free" data-id="thisSlot.id">
                                <div class="icon"><twig:ux:icon name="bi:plus-circle" /></div>
                            </div>
                            </a>
                            {% else %}
                            <div class="cell planning-cell planning-cell-free" data-id="thisSlot.id">
                                
                            </div>                            
                            {% endif %}

                        {% endif %}               

                    {% endfor %}
                {% endfor %}

            {% endfor %}

{# fin du block de grille #}
        </div>
    </div>
</div>