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

{% block title %}Administration > Événement > Configurer{% endblock %}

{% block content %}

    <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
      <ul>
        <li><a href="{{ path('app_main') }}">Accueil</a></li>
        <li><a href="{{ path('app_admin') }}">Administration</a></li>
        <li><a href="{{ path('app_admin_event') }}">Gestion des événements</a></li>
        <li class="is-active"><a>Configuration</a></li>
      </ul>
    </nav>

    <div class="box has-text-centered">
      <strong class="has-text-primary">{{ event.name }}</strong> du {{ event.startOn|date('d/m/Y H:i', app_timezone) }} au {{ event.endOn|date('d/m/Y H:i', app_timezone) }}
    </div>

    <div class="tabs is-boxed">
        <ul>
            <li><a href="{{ path('app_admin_event_config', {'id': event.id}) }}">Accueil</a></li>
            <li><a href="{{ path('app_admin_event_config_space', {'id': event.id}) }}">Espaces</a></li>
            <li><a href="{{ path('app_admin_event_config_period', {'id': event.id}) }}">Périodes</a></li>
            <li class="is-active"><a>Slots</a></li>
            <li><a>Meneur(euse)s de jeu</a></li>
            <li><a>Jeux</a></li>
        </ul>
    </div>

    <div id="tabs-content">
      <div class="container">
        <div class="block">
          <h3 class="title is-3">Configuration des slots</h3>
        </div>
        <div class="columns">
          <div class="column">
            <p>Les <strong>slot</strong> représentent des unités de temps de 30 minutes qui vont accueillir les animations afin de calculer simplement les disponibilités des espaces et/ou des MJ. Ils sont générés à partir des espaces et des périodes. Si vous modifiez, ajoutez ou supprimez des espaces ou des périodes après génération des slots, vous devrez les supprimer, puis relancer leur génération ensuite.</p>
          </div>
          <div class="column">
            <div class="box">
              <div class="level">
                <div class="level-item has-text-centered">
                  {% if event.getSpaces()|length > 0 %}
                    <p class="title">{{ event.getSpaces()|length }}</p>&nbsp;
                    <p class="heading">espaces</p>
                  {% else %}
                    <p class="heading">Aucun espace</p>
                  {% endif %}
                </div>
                <div class="level-item has-text-centered">
                  {% if event.getPeriods()|length > 0 %}
                    <p class="title">{{ event.getPeriods()|length }}</p>&nbsp;
                    <p class="heading">périodes</p>
                  {% else %}
                    <p class="heading">Aucune période</p>
                  {% endif %}
                </div>
                <div class="level-item has-text-centered">
                  {% if event.getSlots()|length > 0 %}
                    <p class="title">{{ event.getSlots()|length }}</p>&nbsp;
                    <p class="heading">slots</p>
                  {% else %}
                    <p class="heading">Aucun slot</p>
                  {% endif %}
                </div>
              </div>
              <div class="block has-text-centered">
                {% if event.getPeriods()|length > 0 and  event.getSpaces()|length > 0 and event.getSlots()|length < 1 %}
                  <a href="{{ path('app_main_event_config_slot_generate', {id: event.getId })}}" data-turbo="false"  class="button is-primary">Générer les slots</a>                   
                {% elseif event.getSlots()|length > 0 and not event.isPublished %}
                  <a href="#" data-id="{{ path('app_main_event_config_slot_delete', {id: event.getId })}}" class="button is-danger" {{ stimulus_controller('admin_confirm') }}>Supprimer les slots</a>
                {% elseif event.getSlots()|length > 0 and event.isPublished %}
                  <button href="#" class="button" disabled>Supprimer les slots</button>
                {% else %}
                  <button href="#" class="button" disabled>Générer les slots</button>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
        <div class="block">
          <h3 class="title is-3">Aperçu du planning</h3>
          <p>Cliquez sur les <strong>slots</strong> pour les basculer <span class="icon"><twig:ux:icon name="bi:lock-fill"/></span>&nbsp;<em>indisponible</em> (aucune partie ne pourra être organisé sur ce slot) ou <em>disponible</em>. <em class="has-text-danger">Fonctionnalité en cours de développement.</em></p>
        </div>
        {% if event.getSlots()|length > 0 %}
        <div id="planning">
          {{ component('Planning', {event: event, displayLocked: true}) }}
        </div>
        {% else %}
          <article class="message is-danger">
              <div class="message-header">
                <p>Aucun slot généré</p>
                <button class="delete" aria-label="delete"></button>
              </div>
              <div class="message-body">
                  Le planning n'est pas encore consultable. Générez les slots à l'aide du bouton à gauche de l'écran.
              </div>
          </article>
        {% endif %}
      </div>





    </div>


{% endblock %}