<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Liste des Événements</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{dir}}/public/css/evenement.css">
</head>
<body>

    <header>
        {% include "menu.html" %}
    </header>

    <div class="container mt-4">
        <div class="div_titres">
            <form action="{{dir}}/rechercherEvenement" method="post">
                <input type="text" name="recherche" id="recherche" placeholder="Rechercher un événement">
                <button type="submit">
                    <img src="{{dir}}/public/assets/search.svg" alt="rechercher" width="30px">
                </button>
            </form>
            <h1>Liste des Événements</h1>
            <a href="{{dir}}/user/{{id}}/creerEvenement" class="btn btn-primary">Publier événement</a>
        </div>

        <ul class="list-group">
            {% if evenements is not empty %}
                {% for evenement in evenements %}
                    <li class="list-group-item">
                        <div class="infos">
                            <h2>{{ evenement.titre }}</h2>
                            <p><strong>Organisateur:</strong> {{ evenement.getNomOrganisateur() }}</p>
                            <p><strong>Date:</strong> {{ evenement.date }}</p>
                            <p><strong>Description:</strong> {{ evenement.description }}</p>
                            <img src="{{dir}}/public/uploads/{{ evenement.getImage() }}" width="250px" class="img-fluid" alt="{{ evenement.titre }}">
                            <p><strong>Places disponibles:</strong> {{ evenement.nbPlaceMax }}</p>
                            <a href="{{dir}}/avoirDetailEvenement/{{ evenement.id }}" class="btn btn-primary">Détails</a>
                        </div>
                        <form action="{{dir}}/supprimerEvenement/{{ evenement.id }}" method="get">
                            <button type="submit" class="btn btn-primary" id="deleteButton">
                                <img src="{{dir}}/public/assets/close.png" alt="Supprimer" width="20px">
                            </button>
                        </form>
                    </li>
                {% endfor %}
            {% else %}
                <li class="list-group-item">Aucun événement trouvé.</li>
            {% endif %}
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>