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

{% block title %}Liste des utilisateurs{% endblock %}

{% block body %}
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-2xl font-bold mb-6">Liste des utilisateurs</h1>

        <div class="overflow-x-auto bg-white shadow-md rounded-lg">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-100 text-xs uppercase text-gray-700">
                <tr>
                    <th class="px-4 py-2 text-left">Id</th>
                    <th class="px-4 py-2 text-left">Email</th>
                    <th class="px-4 py-2 text-left">Rôles</th>
                    <th class="px-4 py-2 text-left">Prénom</th>
                    <th class="px-4 py-2 text-left">Nom</th>
                    <th class="px-4 py-2 text-left">Vérifié</th>
                    <th class="px-4 py-2 text-left">Logs</th>
                    <th class="px-4 py-2 text-left">Bloqué</th>
                    <th class="px-4 py-2 text-left">Actions</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                {% for user in users %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-2">{{ user.id }}</td>
                        <td class="px-4 py-2">{{ user.email }}</td>
                        <td class="px-4 py-2">
                            {% if user.roles %}
                                {{ user.roles|join(', ') }}
                            {% endif %}
                        </td>
                        <td class="px-4 py-2">{{ user.prenom }}</td>
                        <td class="px-4 py-2">{{ user.nom }}</td>
                        <td class="px-4 py-2">
                            <span class="inline-block px-2 py-1 text-xs font-semibold rounded {{ user.isVerified ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ user.isVerified ? 'Oui' : 'Non' }}
                            </span>
                        </td>
                        <td class="px-4 py-2">{{ user.logCount }}</td>
                        <td class="px-4 py-2">
                            <span class="inline-block px-2 py-1 text-xs font-semibold rounded {{ user.isBlocked ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800' }}">
                                {{ user.isBlocked ? 'Oui' : 'Non' }}
                            </span>
                        </td>
                        <td class="px-4 py-2 space-x-2">
                            <a href="{{ path('app_user_show', {'id': user.id}) }}"
                               class="text-indigo-600 hover:text-indigo-900 text-sm">Voir</a>
                            <a href="{{ path('app_user_edit', {'id': user.id}) }}"
                               class="text-yellow-600 hover:text-yellow-800 text-sm">Éditer</a>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="17" class="px-4 py-4 text-center text-gray-500">Aucun utilisateur trouvé</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

    </div>
{% endblock %}