{% extends 'main/base.html.twig' %}

{% block title %}📣 Sortie.com Admin User 🔊{% endblock %}

{% block content %}
    <div class="flex">
        {% include 'admin/sidebar.html.twig' %}

        <!-- Main Content -->
        <div class="ml-64 p-8 w-full">
            <h1 class="text-2xl font-semibold mb-4">Gestion des utilisateurs</h1>

            <!-- Actions: Import/Export -->
            <div class="flex items-center justify-between mb-4">
                <form action="{{ path('participant_import') }}" method="post" enctype="multipart/form-data" class="flex items-center">
                    <input
                            type="file"
                            name="csv_file"
                            accept=".csv"
                            class="block w-full text-sm text-gray-500
                           file:mr-4 file:py-2 file:px-4
                           file:rounded file:border-0
                           file:text-sm file:font-semibold
                           file:bg-gray-800 file:text-white
                           hover:file:bg-gray-700" />
                    <button
                            type="submit"
                            class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
                        Importer CSV
                    </button>
                </form>
                <a href="{{ path('participant_export') }}" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                    Exporter CSV
                </a>
            </div>

            <!-- Participants Table -->
            <div class="overflow-x-auto bg-white rounded shadow">
                <table class="min-w-full bg-white divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prénom</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Téléphone</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Administrateur</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actif</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rôles</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                    {% for participant in participants %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.nom }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.prenom }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.telephone }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.mail }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ participant.administrateur ? 'Oui' : 'Non' }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ participant.actif ? 'Oui' : 'Non' }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ participant.roles|join(', ') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="{{ path('participant_edit', {'id': participant.id}) }}" class="text-indigo-600 hover:text-indigo-900">Modifier</a>
                                <a href="{{ path('participant_delete', {'id': participant.id}) }}" class="text-red-600 hover:text-red-900 ml-4">Supprimer</a>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="8" class="px-6 py-4 text-center text-gray-500">Aucun participant trouvé</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}