{% 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}) }}">Aide</a></li>
            <li><a href="{{ path('app_admin_event_config_space', {'id': event.id}) }}">Espaces</a></li>
            <li class="is-active"><a>Périodes</a></li>
            <li><a href="{{ path('app_admin_event_config_slot', {'id': event.id}) }}">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 périodes</h3>
      <p>Les <strong>périodes</strong> représentent les lieux plages horaires lors desquelles des animations seront proposées.</p>
      </div>
      <div class="box">
      {{ form_errors(form) }}
      {{ form_start(form) }}
        <div class="columns">
          <div class="column">
            {{ form_row(form.startOn) }}
          </div>
          <div class="column">
            {{ form_row(form.endOn) }}
          </div>
        </div>
      {{ form_widget(form) }}
      <div class="control"><button class="button is-primary" type="submit">Ajouter</button></div>
      {{ form_end(form) }}
    </div>
    </div>

    <div class="column">
        <table id="datatable" {{ stimulus_controller('datatables') }} class="table is-striped is-hoverable is-fullwidth">
            <thead>
            <tr>
                <th>Début</th>
                <th>Fin</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            {% for period in event.getPeriods %}
                <tr>
                    <td>{{ period.startOn|date('d/m/Y H:i', app_timezone) }}</td>
                    <td>{{ period.endOn|date('d/m/Y H:i', app_timezone) }}</td>
                    <td>
                      {% if period.isLocked %}
                        <small class="has-text-info">Utilisé dans le calcul des slots.</small>
                      {% else %}
                        <a class="button is-danger" data-id="{{ path('app_admin_period_delete', {'id': period.id})}}" href="#" {{ stimulus_controller('admin_confirm') }}>Supprimer</a>
                      {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>

        </table>
    </div>

    
      
    </div>
    </div>

    </div>

{% endblock %}