{% extends "base.html" %} 

{% block title %}Demande de h24{% endblock %} 

{% block content %}

<h1>Reqûetes de h24</h1>
<hr />

<section class="w-100 p-4">
  <div class="table-responsive border rounded shadow">
    <table class="table">
      <thead style="background-color: rgb(209 213 219)">
        <tr>
          <th scope="col">Origine</th>
          <th scope="col">Dates</th>
          <th scope="col">Contact</th>
          <th scope="col">Personnes</th>
          <th scope="col">Zones</th>
          <th scope="col">Commentaire</th>
          <th scope="col"></th>
          <th scope="col">Statut</th>
        </tr>
      </thead>
      <tbody class="bg-white">
        {% for request in requests %}
        <tr class="align-middle">
          <td>
            <span class="ms-2">{{request.event}}</span>
            <span class="badge bg-primary ms-2"
              >{{request.club.displayName}}</span
            >
          </td>
          <td>
            <small>Du</small> {{request.start|date:"d/m/y H:i"}}<br /><small
              >Au</small
            >
            {{request.end|date:"d/m/y H:i"}}
          </td>
          <td>
            {{request.creator.first_name}} {{request.creator.last_name}}<br /><small
              class="text-muted"
              >{{request.contact_mail}}</small
            ><br /><small class="text-muted">{{request.contact_phone}}</small>
          </td>
          <td>
            {% for people in request.authorized %} {{people}}<br />
            {% endfor %}
          </td>
          <td>{{request.zones}}</td>
          <td>{{request.creator_comment}}</td>
          <td>
            <div class="d-flex align-items-center justify-content-evenly">
              <a
                href="/requete/modification/{{request.id}}"
                class="btn btn-primary"
                >M
              </a>
              <button
                type="button"
                class="btn btn-danger"
                data-bs-toggle="modal"
                data-bs-target="#suppressionModal{{request.id}}"
              >
                S
              </button>
            </div>
          </td>
          <td>
            {% if request.state == "REF" %}
            <spans class="badge rounded-pill px-2 bg-danger">Refusée</spans>
            {% elif request.state == "BR" %}
            <spans class="badge rounded-pill px-2 bg-warning text-dark">Brouillon</spans>
            {% elif request.state == "ATT_VAL" %}
            <spans class="badge rounded-pill px-2 bg-warning text-dark">En attente de validation</spans>
            {% elif request.state == "VAL_RC" %}
            <spans class="badge rounded-pill px-2 bg-secondary">Validée par le respo'club</spans>
            {% elif request.state == "VAL_ADM" %}
            <spans class="badge rounded-pill px-2 bg-secondary">Validée par l'admin</spans>
            {% elif request.state == "VAL_STI" %}
            <spans class="badge rounded-pill px-2 bg-secondary">Validée par le STI</spans>
            {% elif request.state == "MOD" %}
            <spans class="badge rounded-pill px-2 bg-warning text-dark">Modification demandée</spans>
            {% endif %}
          </td>
        </tr>

        <!-- Modal de suppression -->
        <div
          class="modal fade"
          id="suppressionModal{{request.id}}"
          tabindex="-1"
          aria-labelledby="suppressionModalLabel{{request.id}}"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5
                  class="modal-title"
                  id="suppressionModalLabel{{request.id}}"
                >
                  Suppression de la requête
                </h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                Etes-vous sûr de vouloir supprimer cette requête ?
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Fermer
                </button>
                <a
                  href="/requete/suppression/{{request.id}}"
                  type="button"
                  class="btn btn-danger"
                  >Supprimer</a
                >
              </div>
            </div>
          </div>
        </div>

        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endblock content %}