{% 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="is-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_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="columns">
          <div class="column">
            <div class="block">
              <h3 class="title is-3">Configuration des slots</h3>
              <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="box">
              <div class="columns">
                <div class="column">
                  {% if event.getSpaces()|length > 0 %}
                    {{ event.getSpaces()|length }} espaces
                  {% else %}
                    Aucun espace
                  {% endif %}
                </div>
                <div class="column">
                  {% if event.getPeriods()|length > 0 %}
                    {{ event.getPeriods()|length }} périodes
                  {% else %}
                    Aucune période
                  {% endif %}
                </div>
                <div class="column">
                  {% if event.getSlots()|length > 0 %}
                    {{ event.getSlots()|length }} slots
                  {% else %}
                    Aucune slot
                  {% endif %}
                </div>
                <div class="column">
                  {% if event.getPeriods()|length > 0 and  event.getSpaces()|length > 0 and event.getSlots()|length < 1 %}
                    <a href="#" data-id="{{ path('app_main_event_config_slot_generate', {id: event.getId })}}" class="button is-primary"  {{ stimulus_controller('admin_confirm') }}>Générer les slots</a>
                  {% elseif event.getSlots()|length > 0 %}
                    <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>
                  {% else %}
                    <button href="#" class="button" disabled>Générer les slots</button>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="block">
              <h3 class="title is-3">Aperçu du planning</h3>
              <p>Cliquez sur les <strong>slots</strong> qui sont indisponibles.</p>
            </div>
            {% if event.getSlots()|length > 0 %}
              CA ARRRIVE
            {% 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>



      </div>
    </div>


{% endblock %}