{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='admin_evenements.css') }}">
{% endblock %}

{% block content %}
    <a id="retour" href="{{ url_for('menu_admin') }}" class="btn-retour">Retour</a>
    <h1>Les événements du festival</h1>
    <table>
        <thead>
            <tr>
                <th>id Evenement</th>
                <th>id Groupe</th>
                <th>nom Evenement</th>
                <th>heure de début</th>
                <th>heure de fin</th>
                <th>Date de début</th>
                <th>Date de fin</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for evenement in liste_evenements %}
                <tr>
                    <td>{{ evenement.get_idE() }}</td>
                    <td>{{ evenement.get_idG() }}</td>
                    <td>{{ evenement.get_nomE() }}</td>
                    <td>{{ evenement.get_heureDebutE() }}</td>
                    <td>{{ evenement.get_heureFinE() }}</td>
                    <td>{{ evenement.get_dateDebutE() }}</td>
                    <td>{{ evenement.get_dateFinE() }}</td>
                    <td> 
                        <button class="btn-modifier"
                            data-id="{{ evenement.get_idE() }}"
                            data-nom = "{{ evenement.get_nomE() }}"
                            data-heureDebut = "{{ evenement.get_heureDebutE() }}"
                            data-heureFin = "{{ evenement.get_heureFinE() }}"
                            data-dateDebut = "{{ evenement.get_dateDebutE() }}"
                            data-dateFin = "{{ evenement.get_dateFinE() }}">Modifier</button>
                        <button class="btn-supprimer" data-id="{{ evenement.get_idE() }}">Supprimer</button>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <div id="modal-modifier" class="modal">
        <div class="modal-content">
            <span class="close-button">x</span>
            <form action="/modifier_evenement" method="post">
                <!-- ID Evenement (caché) -->
                <input type="hidden" name="id_evenement" id="id_evenement_modifier" value="">
                <!-- Champs pour la modification -->
                <input type="text" name="nom_evenement" id="nom_evenement_modifier" placeholder="Nom de l'événement">
                
            </form>
        </div>

    </div>
    <button id="ajouter">Ajouter</button>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var modalModifier = document.getElementById("modal-modifier");
            var btnClose = document.querySelectorAll(".close-button");

            btnClose.forEach(function(btn) {
                btn.onclick = function() {
                    modalModifier.style.display = "none";
                };
            });

            document.querySelectorAll(".btn-modifier").forEach(function(btn) {
                btn.onclick = function() {
                    document.getElementById("id_evenement_modifier").value = btn.getAttribute("data-id");
                    document.getElementById("nom_evenement_modifier").value = btn.getAttribute("data-nom");
                    modalModifier.style.display = "block";
                };
            });
        });
    </script>

{% endblock %} 
j'aimerais dans mon modal modifier ajouter un menu déroulant pour choisir les horaires, et aussi de quoi choisir les dates