{% extends 'admin/base.twig' %}

{% block title 'Événement(s)' %}
{% block page_title 'Liste des Événements' %}

{% block body %}

    <!-- Conteneur principal: utiliser bg-gray-900 pour l'arrière-plan du corps -->

    <div class="bg-gray-900 text-gray-100 min-h-screen p-6">
        <div class="flex justify-between items-center mb-6">
            <!-- Titre en blanc -->
            <h2 class="text-2xl font-semibold text-gray-100">Gestion des Événements</h2>
            <!-- Bouton Créer un événement: le style reste contrasté -->
            <a href="{{ path('admin_events_create') }}"
               class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium
rounded-lg shadow-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-2
focus:ring-offset-2 focus:ring-indigo-500 focus:ring-offset-gray-900 transition duration-150">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                Créer un événement
            </a>
        </div>

        <!-- Tableau des événements -->
        <!-- Fond du tableau en gris foncé, ombre conservée -->
        <div class="bg-gray-800 shadow-xl overflow-hidden sm:rounded-lg">
            {% if events is empty %}
                <!-- Texte vide en gris clair -->
                <div class="p-6 text-center text-gray-400">
                    Aucun événement trouvé. Commencez par en créer un !
                </div>
            {% else %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-700">
                        <!-- En-tête du tableau -->
                        <thead class="bg-gray-700">
                        <tr>
                            <!-- Texte de l'en-tête en gris clair/blanc -->
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                                Titre
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider hidden sm:table-cell">
                                Lieu
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider hidden md:table-cell">
                                Organisateur
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                                Début
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider hidden md:table-cell">
                                Fin
                            </th>
                            <th scope="col" class="relative px-6 py-3">
                                <span class="sr-only">Actions</span>
                            </th>
                        </tr>
                        </thead>
                        <!-- Corps du tableau -->
                        <tbody class="bg-gray-800 divide-y divide-gray-700">
                        {% for event in events %}
                            <!-- Ligne au survol en gris légèrement plus clair -->
                            <tr class="hover:bg-gray-700 transition duration-100">
                                <!-- Titre en blanc -->
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-100">
                                    {{ event.title }}
                                </td>
                                <!-- Texte des cellules en gris clair -->
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400 hidden sm:table-cell">
                                    {{ event.location }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400 hidden md:table-cell">
                                    {{ event.organizer }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
                                    {{ event.startAt|date('d/m/Y') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400 hidden md:table-cell">
                                    {{ event.endAt|date('d/m/Y') }}
                                </td>
                                <!-- Actions : lien Modifier en indigo, lien Supprimer en rouge -->
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ path('admin_events_edit', {id: event.id}) }}" class="text-indigo-400 hover:text-indigo-300 mr-3">
                                        Modifier
                                    </a>
                                    <!-- Bouton de suppression -->
                                    <form method="POST" action="{{ path('admin_events_delete', {id: event.id}) }}" class="inline-block" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cet événement ? Cette action est irréversible.');">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ event.id) }}">
                                        <button type="submit" class="text-red-400 hover:text-red-300 focus:outline-none">
                                            Supprimer
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>


    </div>
{% endblock %}
