{% 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><a href="{{ path('app_admin_event_config_slot', {'id': event.id}) }}">Slots</a></li>
            <li><a href="{{ path('app_admin_event_config_gamemaster', {'id': event.id}) }}">Meneur(euse)s de jeu</a></li>
            <li class="is-active"><a>Jeux</a></li>
            <li><a href="{{ path('app_admin_event_config_party', {'id': event.id}) }}">Parties</a></li>
        </ul>
    </div>

    <div id="tabs-content">

    {% if event.getGamemastersAssigned|length < 1 %}
            <article class="message is-danger">
              <div class="message-header">
                <p>Aucun(e) MJ assigné(e)</p>
              </div>
              <div class="message-body">
                  La liste des jeux de rôle d'un événement dépend des MJ qui ont été assigné(e)s. Vous devez assigner des MJ avant de pouvoir choisir les jeux.
              </div>
          </article>
    {% else %}
      <div class="content">
        <h3 class="title is-3">Jeux proposés</h3>
        <p>Seuls les jeux colorisés seront proposés pour cet événement. Cliquez sur les jeux pour les ajouter ou les supprimer aux jeux proposés.</p>
      </div>
      <div class="fixed-grid has-6-cols-fullhd has-4-cols-widescreen has-4-cols-desktop has-4-cols-tablet has-2-cols-mobile">
        <div class="grid is-col-min-12">
          {% for game in allGames %}

          <div class="cell {% if game in gamesNotPlayed %}is-div-disabled{% endif %}" data-game-toggle-game-id-value="{{ game.id }}" data-game-toggle-event-id-value="{{ event.id}}" {{ stimulus_controller('game-toggle') }}>
            
            <div class="card">
              <div class="card-image">
              <figure class="image is-3by1">

                  {% if game.picture %}
                  <img src="/images/games/{{ game.picture }}"  />
                  {% else %}
                  <img src="/images/games/placeholder.webp"  />
                  {% endif %}

              </figure>
              </div>
              <div class="card-content">
                <div class="content text-limit-height">
                  <p>
                    <strong>{{ game.name }}</strong>
                    <br/>
                    {% for genre in game.genre %}<span class="tag is-info is-light">{{ genre.genre }}</span> {% endfor %}
                    
                    
                  </p>
                </div>
              </div>
            </div>
            
          </div>
          {% endfor %}
        </div>
      </div>

    {% endif %}
 
    </div>

{% endblock %}