{% extends 'layout/app.html.twig' %}

{% block title %}Utilisateurs{% endblock %}
{% block page_title %}Utilisateurs{% endblock %}

{% block page_actions %}
    {% if is_granted('USER_CREATE') %}
        <a href="{{ path('app_user_new') }}" class="btn btn-accent">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
            Nouvel utilisateur
        </a>
    {% endif %}
{% endblock %}

{% block content %}
    <form method="get" class="card mb-4 grid gap-3 p-4 sm:grid-cols-[1fr_auto_auto_auto]">
        <input type="search" name="q" value="{{ filters.q }}" placeholder="Rechercher (nom, email, téléphone)…" class="form-input">
        <select name="role" class="form-input">
            <option value="">Tous les rôles</option>
            {% for role in roles %}
                <option value="{{ role.value }}" {{ filters.role == role ? 'selected' }}>{{ role.label }}</option>
            {% endfor %}
        </select>
        <select name="statut" class="form-input">
            <option value="">Tous les statuts</option>
            <option value="actif" {{ filters.statut == 'actif' ? 'selected' }}>Actifs</option>
            <option value="bloque" {{ filters.statut == 'bloque' ? 'selected' }}>Bloqués</option>
        </select>
        <button type="submit" class="btn btn-primary">Filtrer</button>
    </form>

    <div class="card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200 text-sm">
                <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">
                    <tr>
                        <th class="px-5 py-3">Utilisateur</th>
                        <th class="px-5 py-3">Rôle</th>
                        <th class="px-5 py-3">Téléphone</th>
                        <th class="px-5 py-3">Statut</th>
                        <th class="px-5 py-3">Dernière connexion</th>
                        <th class="px-5 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    {% for user in users %}
                        <tr class="hover:bg-slate-50">
                            <td class="px-5 py-3">
                                <div class="flex items-center gap-3">
                                    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-100 text-xs font-bold text-brand-800">{{ user.initials }}</span>
                                    <div>
                                        <p class="font-medium text-slate-900">{{ user.fullName }}</p>
                                        <p class="text-xs text-slate-500">{{ user.email }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-3"><span class="badge {{ user.mainRole.badgeClass }}">{{ user.mainRole.label }}</span></td>
                            <td class="px-5 py-3 text-slate-600">{{ user.phone ?: '—' }}</td>
                            <td class="px-5 py-3">{{ include('user/_status.html.twig') }}</td>
                            <td class="px-5 py-3 text-slate-600">{{ user.lastLoginAt ? user.lastLoginAt|date : 'Jamais' }}</td>
                            <td class="px-5 py-3 text-right">
                                <a href="{{ path('app_user_show', {id: user.id}) }}" class="font-medium text-brand-700 hover:text-brand-900">Voir</a>
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="6" class="px-5 py-10 text-center text-slate-500">Aucun utilisateur trouvé.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% if users.pageCount > 1 %}
            <div class="border-t border-slate-100 px-5 py-3">{{ knp_pagination_render(users) }}</div>
        {% endif %}
    </div>
    <p class="mt-3 text-xs text-slate-500">{{ users.totalItemCount }} utilisateur{{ users.totalItemCount > 1 ? 's' }}</p>
{% endblock %}