{% extends "base.html.twig" %}

{% block content %}
<div class="container-fluid p-0">
  <form>
    <div class="container pt-5 pb-5">
      <div class="row">
        <div class="col-lg-3 col-responsive">
          {% include 'shared/menu.html.twig' %}
        </div>
        <div class="col-lg-9 ">
          <div class="mt-3">
            <h5 class="card-header-title">Liste des sessions actives et terminées</h5>
          </div>
          {% include 'formation/filtre-sessions-actives-terminé.html.twig' %}
          {# {% include 'formation/filtre-session.html.twig' %}  #}
          <div class="table-responsive mb-5 pt-3">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Titre</th>
                  <th scope="col">Date de début</th>
                  <th scope="col">Date de fin</th>
                  <th scope="col">Nombres des heures</th>
                  <th scope="col">Capacité</th>
                  <th scope="col">Prix</th>
                  <th scope="col">Statut</th>
                  <th scope="col">
                    <div class="float-end me-3">Action</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                {% for session in sessions %}
                <tr>
                  <td>{{session.title}}</td>
                  <td>{{session.startTime |date('Y-m-d')}}</td>
                  <td>{{session.endTime |date('Y-m-d')}}</td>
                  <td>{{session.nbhours}}</td>
                  <td>{{session.capacity}}</td>
                  <td>{{session.price}}</td>
                  <td>
                    {% if (session.status == 0) %}
                      <small class="badge bg-danger rounded-pill">Inactive</small>
                    {% elseif (session.status == 1) %}
                      <small class="badge bg-success rounded-pill">Active</small>
                  {% elseif (session.status == 2) %}
                  <small class="badge bg-primary rounded-pill">Terminé</small>
                    {% endif %}
                  </td>
                  <td>
                    <div class="text-center">
                      <a href="{{ path('inscription_by_sessions', {'id': session.id }) }}" class="text-decoration-none" title="Inscription">
                        <svg  width="20" height="20" fill="#8c98a4" class="bi bi-journal-check" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                          <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
                          <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
                        </svg>
                      </a>
                    </div>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {# <div class="d-flex justify-content-end">
            <div class="navigation">
              {% do sessions.setPageRange(2) %}
              {{ knp_pagination_render(sessions,'pagination.html.twig') }}
            </div>
          </div> #}
          <div class="d-flex flex-row-reverse ">
            <div class="navigation my-4">
              {% do sessions.setPageRange(1) %} {{ knp_pagination_render(sessions,'pagination.html.twig') }}
            </div>
            <div class="my-4">
              <select name="resultat" class="form-select nbr-course-page me-2 text-muted" id="resultat" onchange="this.form.submit()">
                {% for key, resultat in resultats %}
                  <option {{ app.request.get('resultat')==key ~ '' ? 'selected' : '' }} value="{{ key }}">{{ resultat }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
{% endblock %}