{# 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 #}
                        {% 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" style="height: {{ thisSlot.party.slots|length * 4 }}rem !important">
                                      {# Carte "jeu" DEBUT #}
                                        <div class="card" style="height: {{ thisSlot.party.slots|length * 4 - 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 pathFullSlot %}<a href="{{ path(pathFullSlot, {id: thisSlot.id}) }}" class="open-modal">{% endif %}
                                                                {% 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 %}
                                                                {% if pathFullSlot %}</a>{% endif %}
                                                            </figure>
                                                        </div>
                                                    </div>
                                                        <div class="media-content">
                                                            {% if pathFullSlot %}<a href="{{ path(pathFullSlot, {id: thisSlot.id}) }}" class="open-modal">{% endif %}<span class="title is-6">{{ thisSlot.party.game.name }}</span>{% if pathFullSlot %}</a>{% endif %}<br/>
                                                            <small class="hax-text-grey-light">@{{ thisSlot.party.gamemaster.preferedName }}{% if thisSlot.party.gamemasterIsAuthor %}<br/><span class="tag is-info">animée par l'auteur</span>{% endif %}</small>
                                                        </div>

                                                </div>
                                                <div class="card-content">
                                                    <small>Places : {{ thisSlot.party.getSeatsLeft }} / {{ thisSlot.party.getMaxParticipants }}</small>
                                                </div>

                                            
                                        </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 %}
                        {# 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" 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>