{% extends "base.html" %}

{% block title %}Liste des évènements{% endblock %}

{%block content %}
<div class="d-flex align-items-center justify-content-between px-5 w-100">
  <div class="d-flex align-items-center">
    <h1>Évènements</h1>
  </div>
  <a class="btn btn-primary" href="/evenement/creation">Ajouter un évènement</a>
</div>

<hr />
<section class="d-flex align-items-top justify-content-evenly flex-wrap w-100">
  {% for event in events %}
  <div class="border rounded shadow p-2 mb-2" style="width: 45%">
    <table class="table">
      <section class="d-flex pt-2 align-items-center justify-content-between">
        <h3>{{ event.name }}</h3>
        <div>
          <a class="btn btn-primary" href="/evenement/modification/{{event.id}}"
            >Modifier</a
          >
          <a class="btn btn-primary" href="/requete/creation/{{event.id}}"
            >Requête</a
          >
          <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#suppressionModal{{event.id}}">
            Supprimer
        </div>

        <!-- Modal de suppression -->
        <div class="modal fade" id="suppressionModal{{event.id}}" tabindex="-1" aria-labelledby="suppressionModalLabel{{event.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{{event.id}}">Suppression de l'évènement</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 cet Évènement ?
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <a href="/evenement/suppression/{{event.id}}" type="button" class="btn btn-danger" >Supprimer</a>
              </div>
            </div>
          </div>
        </div>

      </section>

      <hr class="border border-dark border-top border-1 w-100" />
      <tbody>
        <tr>
          <th scope="row">date de début</th>
          <td>{{ event.start }}</td>
        </tr>
        <tr>
          <th scope="row">date de fin</th>
          <td>{{ event.end }}</td>
        </tr>
        <tr>
          <th scope="row">Description</th>
          <td>{{ event.description }}</td>
        </tr>
        <tr>
          <th scope="row">Lieu</th>
          <td>{{ event.location }}</td>
        </tr>
        <tr>
          <th scope="row">Nombre de participants</th>
          <td>{{ event.nb_participants }}</td>
        </tr>
        <tr>
          <th scope="row">Créateur</th>
          <td>{{ event.creator.username }}</td>
        </tr>
        <tr>
          <th scope="row">Commentaires</th>
          <td>{{ event.comment }}</td>
        </tr>
        <tr>
          <th scope="row">Présence d'alcool</th>
          <td>{{ event.alcohol }}</td>
        </tr>
        {% if event.alcohol %}
        <tr>
          <th scope="row">Détail sur l'alcool</th>
          <td>{{ event.alcohol_details }}</td>
        </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
  {% empty %}
  <p>Il n'y a pas d'évènement</p>



  {% endfor %}
</section>
{% endblock content %}