{# Template pour les plannings #}

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

{# début du block de grille #}
<div class="block" {{ stimulus_controller('planning') }}>
    {# 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 is-coll-start planning-cell planning-cell-heading">
                Espaces
            </div>
            {% for space in event.getSpaces() %}
            <div class="cell planning-cell planning-cell-heading">
                {{ space.name }}
            </div>
            {% endfor %}
        </div>
    </div>

    {# On ajoute les horaires période par période #}
    {% set i=0 %}
    {% set first_period=1 %}
    {% for period in event.getPeriods() %}
    <div class="fixed-grid has-{{ cols }}-cols period-panel{% if i>0 %} is-hidden{% endif %}" id="#period-{{ period.id }}">
        <div class="grid is-gap-0">
            <div class="cell planning-cell planning-cell-period is-col-span-{{ cols }} has-text-centered">
                {% if i > 0 %}
                    <span class="icon period-controller" data-id="#period-{{ event.getPeriods()[i-1].id }}"><twig:ux:icon name='bi:arrow-left-circle'/></span>
                {% else %}
                    {% set first_period=period.id %}
                {% endif %}
                <div class="planning-cell-force-large has-text-centered">Période du {{ period.startOn|date('d/m/Y \\d\\e H:i', app_timezone) }} à {{ period.endOn|date('H:i', app_timezone) }}</div>
                {% if i+1 < event.getPeriods()|length %}
                    <span class="icon period-controller"  data-id="#period-{{ event.getPeriods()[i+1].id }}"><twig:ux:icon name='bi:arrow-right-circle'/></span>
                {% endif %}
                {% set i=i+1 %}
            </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">
                {{ 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.getThisSlotInfo(dateRef, space, period) %}

                {# --CASE1-- si le slot est Indisponible #}
                {% if thisSlot.unavailable %}
                    {% if displayLocked %}
                    <div class="cell planning-cell planning-cell-locked  has-text-centered" data-id="{{ thisSlot.id }}">
                        <div class="icon"><twig:ux:icon name="bi:lock-fill" /></div>
                    </div>
                    {% else %}
                    <div class="cell planning-cell planning-cell-locked">
                    </div>
                    {% endif %}
                {% endif %}

                {# --CASE2 -- si une partie est sur le slot #}
                {% if thisSlot.party  %}
                    {% if thisSlot.party.isValidated or displayUnvalidates %}
                        {% if thisSlot == thisSlot.party.slots[0] %}
                        {# Premier slot d'une partie ou partie non validée #}
                        <div class="cell planning-cell planning-cell-game-parent">
                            <div class="planning-cell-game {% if thisSlot.party.getSeatsLeft < 1 %}planning-cell-game-isfull {% endif %}{% if pathFullSlot %} open-modal" href="{{ path(pathFullSlot, {id: thisSlot.id}) }}"{% else %}"{% endif %} style="height: {{ thisSlot.party.slots|length * 4 * app_hmult }}rem !important">
                                {# Carte "jeu" DEBUT #}
                                <div class="card has-background-primary-45 has-text-primary-45-invert" style="{% if thisSlot.party.game.picture %}background-image: url('/images/games/{{ thisSlot.party.game.picture }}');{% endif %} height: {{ thisSlot.party.slots|length * 4 * app_hmult - 0.7 }}rem !important; {% if not thisSlot.party.isValidated %}filter:grayscale(1) opacity(0.3);{% endif %};">
                                    <div class="card-header">
                                        <div class="media">
                                            <div class="media-left">
                                                <figure class="image is-48x48">
                                                    {% if thisSlot.party.gamemaster.picture %}
                                                    <img class="is-rounded" src="/images/gamemasters/{{ thisSlot.party.gamemaster.picture }}"  />
                                                    {% else %}
                                                    <twig:ux:icon name="bi:person-fill"/>
                                                    {% endif %}
                                                </figure>
                                            </div>
                                        </div>
                                        <div class="media-content">
                                            <small class="has-text-grey-darker">{{ thisSlot.party.gamemaster.preferedName }}</small><br/>
                                            <span class="title is-6 has-text-primary-45-invert">{{ thisSlot.party.game.name }}</span>
                                        </div>
                                    </div>
                                    <div class="card-content">
                                        <p><span class="tag is-dark m-1">Places : {{ thisSlot.party.getSeatsLeft }}/{{ thisSlot.party.getMaxParticipants }}</span></p>
                                        {% if thisSlot.party.gamemasterIsAuthor %}<p><span class="tag is-warning m-1">partie animée par l'auteur</span></p>{% endif %}
                                        <p>{% for genre in thisSlot.party.game.genre %}<span class="tag is-info m-1">{{ genre.genre }}</span>{% endfor %}</p>
                                    </div>
                                    {% if pathFullSlot %}</a>{% endif %}
                                </div>                             
                                {# Carte "jeu" FIN #}
                            </div>
                        </div>
                        {% else %}
                        {# Slot suivant d'une partie #}
                        <div class="cell planning-cell planning-cell-game-parent">
                        </div>
                        {% endif %}
                    {% else %}
                        {# Partie non validée masquée #}
                        <div class="cell planning-cell planning-cell-free">
                        </div>
                    {% endif %}
                {% endif %}
                {# --CASE3-- si le slot est disponible et sans partie #}
                {% if not thisSlot.unavailable and not thisSlot.party %}
                    {% if pathEmptySlot %}
                    <a href="{{ path(pathEmptySlot, {id: thisSlot.id}) }}"  class="open-modal">
                        <div class="cell planning-cell planning-cell-free has-text-centered" data-id="{{ thisSlot.id }}">
                            <div class="icon"><twig:ux:icon name="bi:plus-circle" /></div>
                        </div>
                    </a>
                    {% elseif displayLocked %}
                    <div class="cell planning-cell planning-cell-free has-text-centered" data-id="{{ thisSlot.id }}">
                        <div class="icon"><twig:ux:icon name="bi:unlock-fill" /></div>
                    </div>
                    {% else %}
                    <div class="cell planning-cell planning-cell-free" data-id="{{ thisSlot.id }}">
                    </div>                            
                    {% endif %}

                {% endif %}               

            {% endfor %}
        
        {% endfor %}
        </div>
    </div>

    {% endfor %}

{# fin du block de grille #}
{% if i > 1 %}
<div class="has-text-centered"><p data-store="#period-{{ first_period }}" data-action="show" class="button">Afficher toutes les périodes à la suite</p></div>
{% endif %}
</div>