{% extends 'base.html' %} 

{% block title %}Demande en attente{% endblock %}

{%block content %}
<h3>
  Il y a {{ pendingRequests.count }} requête{{ pendingRequests.count|pluralize}}
  en attente de traitement.
</h3>
<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>
        </tr>
      </thead>
      <tbody class="bg-white">
        {% for request in pendingRequests %}
        <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">
              <button
                type="button"
                class="btn btn-success"
                data-bs-toggle="modal"
                data-bs-target="#validateModal{{request.id}}"
              >
                E
              </button>
              <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>
        </tr>

        <!-- Modal de validation -->
        <div
          class="modal fade"
          id="validateModal{{request.id}}"
          tabindex="-1"
          aria-labelledby="validateModalLabel{{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="validateModalLabel{{request.id}}">
                  Validation 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 valider cette requête ?
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Fermer
                </button>
                <a
                  href="/requete/validation/{{request.id}}"
                  type="button"
                  class="btn btn-success"
                  >Valider</a
                >
              </div>
            </div>
          </div>
        </div>

        <!-- 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 %}