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

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

{% block body %}
    <div class="min-h-screen bg-gray-100">
        {{ include('admin/_sidebar.html.twig') }}
        
        <div class="md:ml-64">
            <header class="bg-white shadow">
                <div class="px-4 sm:px-6 lg:px-8 py-4">
                    <h1 class="text-2xl font-bold text-gray-900">Utilisateurs</h1>
                </div>
            </header>

            <main class="py-6 px-4 sm:px-6 lg:px-8">
            {% for message in app.flashes('success') %}
                <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                    <span class="block sm:inline">{{ message }}</span>
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                    <span class="block sm:inline">{{ message }}</span>
                </div>
            {% endfor %}
            <div class="px-4 py-6 sm:px-0">
                <!-- Filters -->
                <div class="bg-white shadow rounded-lg p-4 mb-6">
                    <form method="get" class="flex flex-wrap gap-4 items-end">
                        <div class="flex-1 min-w-[200px]">
                            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                            <input type="text" name="search" id="search" value="{{ search }}" placeholder="Email, nom, prénom..." class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div class="w-40">
                            <label for="blocked" class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                            <select name="blocked" id="blocked" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="">Tous</option>
                                <option value="0" {% if filterBlocked == '0' %}selected{% endif %}>Actifs</option>
                                <option value="1" {% if filterBlocked == '1' %}selected{% endif %}>Bloqués</option>
                            </select>
                        </div>
                        <div>
                            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm">Filtrer</button>
                            <a href="{{ path('admin_users') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 text-sm ml-2">Réinitialiser</a>
                        </div>
                    </form>
                </div>

                <div class="bg-white shadow overflow-hidden sm:rounded-md">
                    <ul class="divide-y divide-gray-200">
                        {% for user in users %}
                            <li>
                                <a href="{{ path('admin_user_detail', {id: user.id}) }}" class="block hover:bg-gray-50 transition-colors">
                                    <div class="px-4 py-4 sm:px-6">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-10 w-10">
                                                    <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                                                        <span class="text-sm font-medium text-gray-700">{{ user.firstName[:1] }}{{ user.lastName[:1] }}</span>
                                                    </div>
                                                </div>
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-gray-900">{{ user.firstName }} {{ user.lastName }}</div>
                                                    <div class="text-sm text-gray-500">{{ user.email }}</div>
                                                </div>
                                            </div>
                                            <div class="text-sm text-gray-500">
                                                {% if user.isBlocked %}
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Bloqué</span>
                                                {% else %}
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Actif</span>
                                                {% endif %}
                                                {% if lastLogin and user.createdAt > lastLogin %}
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 ml-1">Nouveau</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                
                {{ include('admin/_pagination.html.twig') }}
            </main>
        </div>
    </div>
{% endblock %}