{# @tailwind-safelist
   bg-primary/10 bg-cohorts/10 bg-warning/10 bg-error/10 bg-success/10 bg-info/10 bg-pink/10
   bg-primary/[0.08] bg-cohorts/[0.08] bg-warning/[0.08] bg-error/[0.08] bg-success/[0.08] bg-info/[0.08] bg-pink/[0.08]
   bg-primary/[0.14] bg-cohorts/[0.14] bg-warning/[0.14] bg-error/[0.14] bg-success/[0.14] bg-info/[0.14] bg-pink/[0.14]
   text-primary text-cohorts text-warning text-error text-success text-info text-pink
   hover:bg-primary/[0.07] hover:bg-cohorts/[0.07] hover:bg-warning/[0.07] hover:bg-error/[0.07] hover:bg-success/[0.07] hover:bg-info/[0.07] hover:bg-pink/[0.07]
   has-[:checked]:from-primary/[0.08] has-[:checked]:from-cohorts/[0.08] has-[:checked]:from-warning/[0.08] has-[:checked]:from-error/[0.08] has-[:checked]:from-success/[0.08] has-[:checked]:from-info/[0.08] has-[:checked]:from-pink/[0.08]
   has-[:checked]:to-primary/[0.03] has-[:checked]:to-cohorts/[0.03] has-[:checked]:to-warning/[0.03] has-[:checked]:to-error/[0.03] has-[:checked]:to-success/[0.03] has-[:checked]:to-info/[0.03] has-[:checked]:to-pink/[0.03]
   group-hover/opt:border-primary group-hover/opt:border-cohorts group-hover/opt:border-warning group-hover/opt:border-error group-hover/opt:border-success group-hover/opt:border-info group-hover/opt:border-pink
   group-hover/opt:bg-primary/[0.14] group-hover/opt:bg-cohorts/[0.14] group-hover/opt:bg-warning/[0.14] group-hover/opt:bg-error/[0.14] group-hover/opt:bg-success/[0.14] group-hover/opt:bg-info/[0.14] group-hover/opt:bg-pink/[0.14]
   group-has-[:checked]/opt:bg-primary group-has-[:checked]/opt:bg-cohorts group-has-[:checked]/opt:bg-warning group-has-[:checked]/opt:bg-error group-has-[:checked]/opt:bg-success group-has-[:checked]/opt:bg-info group-has-[:checked]/opt:bg-pink
   group-has-[:checked]/opt:border-primary group-has-[:checked]/opt:border-cohorts group-has-[:checked]/opt:border-warning group-has-[:checked]/opt:border-error group-has-[:checked]/opt:border-success group-has-[:checked]/opt:border-info group-has-[:checked]/opt:border-pink
   group-has-[:checked]/opt:text-primary group-has-[:checked]/opt:text-cohorts group-has-[:checked]/opt:text-warning group-has-[:checked]/opt:text-error group-has-[:checked]/opt:text-success group-has-[:checked]/opt:text-info group-has-[:checked]/opt:text-pink
#}
{% extends 'base.html.twig' %}

{% block title %}{{ isAdmin ? 'Gestion des utilisateurs - Admin' : 'Utilisateurs - ' ~ managerCompany.name }}{% endblock %}


{% block body %}

<div class="max-w-[1400px] mx-auto">

    {# ================================================================
       HEADER
       ================================================================ #}
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-8">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: isAdmin ? 'Gestion des utilisateurs' : 'Utilisateurs',
            subtitle: isAdmin
                ? 'Consultez et gérez l\'ensemble des comptes utilisateurs. Créez de nouveaux profils, attribuez des rôles, activez ou désactivez des accès.'
                : 'Gérez les membres de ' ~ managerCompany.name ~ '. Créez de nouveaux comptes, attribuez des rôles et suivez l\'activité de votre équipe.',
            icon: 'users',
            backHref: path('app_dashboard'),
            backLabel: 'Retour au dashboard'
        } only %}

        {% if isAdmin %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Nouvel utilisateur',
                variant: 'primary',
                size: 'lg',
                icon: 'plus',
                href: path('admin_user_new')
            } only %}
        {% elseif app.user.isActive %}
            {% if stats.remainingSlots is defined and stats.remainingSlots <= 0 %}
                <div class="flex items-center gap-2">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Nouvel utilisateur',
                        variant: 'primary',
                        size: 'lg',
                        icon: 'plus',
                        disabled: true
                    } only %}
                    {% include '_atoms/badge/badge.html.twig' with {
                        label: 'Limite atteinte (' ~ stats.maxUsers ~ '/' ~ stats.maxUsers ~ ')',
                        variant: 'warning',
                        size: 'sm'
                    } only %}
                </div>
            {% else %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Nouvel utilisateur',
                    variant: 'primary',
                    size: 'lg',
                    icon: 'plus',
                    href: path('admin_user_new')
                } only %}
            {% endif %}
        {% endif %}
    </div>

    {# ================================================================
       STATISTIQUES
       ================================================================ #}
    {% if isAdmin %}
        {# Stats Admin : vue globale plateforme #}
        <section class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-10">
            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Utilisateurs',
                value: stats.total,
                icon: 'users',
                variant: 'primary',
                size: 'sm',
                layout: 'horizontal'
            } only %}

            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Actifs',
                value: stats.active,
                icon: 'check-circle',
                variant: 'success',
                size: 'sm',
                layout: 'horizontal'
            } only %}

            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Désactivés',
                value: stats.inactive,
                icon: 'power',
                variant: 'error',
                size: 'sm',
                layout: 'horizontal'
            } only %}

            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Nouveaux (30j)',
                value: stats.recentCount|default(0),
                icon: 'clock',
                variant: 'primary',
                detail: 'Ce mois-ci',
                size: 'sm',
                layout: 'horizontal'
            } only %}
        </section>
    {% else %}
        {# Stats Manager : quota utilisateurs #}
        <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10" data-max-users="{{ stats.maxUsers }}">
            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Utilisateurs actifs',
                value: stats.active ~ ' / ' ~ stats.maxUsers,
                icon: 'users',
                variant: 'primary',
                size: 'sm',
                layout: 'horizontal'
            } only %}

            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: stats.remainingSlots > 1 ? 'Places disponibles' : 'Place disponible',
                value: stats.remainingSlots,
                icon: 'plus',
                variant: stats.remainingSlots > 0 ? 'success' : 'warning',
                size: 'sm',
                layout: 'horizontal'
            } only %}

            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Désactivés',
                value: stats.inactive,
                icon: 'power',
                variant: 'error',
                size: 'sm',
                layout: 'horizontal'
            } only %}
        </section>
    {% endif %}

    {# ================================================================
       TABLEAU DES UTILISATEURS
       ================================================================ #}
    <section class="bg-white rounded-2xl border border-gray-200 shadow-sm">
        {# Header avec filtres #}
        <div class="px-4 sm:px-6 py-4 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 relative z-20">
            <h2 class="text-lg font-semibold text-gray-900 font-[Poppins]">
                Liste des utilisateurs
                <span class="text-sm font-normal text-gray-400 ml-2">({{ pagination.totalItems }})</span>
            </h2>

            {# ---- Tailwind class variables for DRY ---- #}
            {% set triggerBase = 'w-full sm:w-auto flex items-center gap-1.5 px-3 h-[38px] border-[1.5px] rounded-lg text-sm bg-white cursor-pointer whitespace-nowrap transition-all duration-200 group-[.filter-multiselect--open]/filter:border-primary group-[.filter-multiselect--open]/filter:shadow-[0_0_0_3px_rgba(12,129,228,0.1)]' %}
            {% set chevronSvg = 'text-gray-400 shrink-0 transition-transform duration-200 group-[.filter-multiselect--open]/filter:rotate-180' %}
            {% set dropdownBase = 'hidden group-[.filter-multiselect--open]/filter:block absolute top-[calc(100%+4px)] left-0 min-w-[220px] bg-white border-[1.5px] border-gray-200 rounded-xl shadow-lg z-50 py-1.5 max-h-[280px] overflow-y-auto' %}
            {% set optBase = 'group/opt flex items-center gap-2.5 py-2 px-3.5 mx-1.5 rounded-md cursor-pointer text-sm text-gray-700 transition-colors duration-150 hover:bg-primary/[0.07] has-[:checked]:bg-gradient-to-r has-[:checked]:from-primary/[0.08] has-[:checked]:to-primary/[0.03]' %}
            {% set optBaseNoColor = 'group/opt flex items-center gap-2.5 py-2 px-3.5 mx-1.5 rounded-md cursor-pointer text-sm text-gray-700 transition-colors duration-150' %}
            {% set radioBase = 'w-[18px] h-[18px] border-2 border-gray-300 rounded-full shrink-0 flex items-center justify-center transition-all duration-200 group-hover/opt:border-primary group-has-[:checked]/opt:border-primary group-has-[:checked]/opt:shadow-[0_2px_6px_rgba(12,129,228,0.3)]' %}
            {% set radioDot = 'w-2 h-2 rounded-full bg-transparent transition-all duration-200 group-has-[:checked]/opt:bg-primary' %}
            {% set optLabel = 'flex-1 leading-snug group-has-[:checked]/opt:text-primary group-has-[:checked]/opt:font-semibold' %}
            {% set iconBase = 'w-[26px] h-[26px] rounded-md shrink-0 flex items-center justify-center transition-all duration-200' %}

            {# Filtres inline #}
            <form method="get" action="{{ path('admin_user_list') }}" class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3"
                  data-controller="admin--user-filters"
                  data-turbo-action="replace">

                {# ---- Filtre rôle ---- #}
                <div class="filter-multiselect relative group/filter"
                     data-admin--user-filters-target="multiselect">
                    <button type="button"
                            class="{{ triggerBase }} {{ filters.role ? 'border-primary bg-primary/[0.04] text-primary' : 'border-gray-200 text-gray-700 hover:border-gray-300' }}"
                            data-action="click->admin--user-filters#toggleDropdown">
                        <span class="shrink-0 {{ filters.role ? 'text-primary' : 'text-gray-400' }}">
                            {% include '_atoms/icon/solar/shield.html.twig' with {size: 16} %}
                        </span>
                        <span>{% if filters.role == 'ROLE_ADMIN' %}Admin{% elseif filters.role == 'ROLE_COMPANY_MANAGER' %}Gestionnaire{% elseif filters.role == 'ROLE_COMMERCIAL' %}Commercial{% elseif filters.role == 'ROLE_USER' %}Utilisateur{% else %}Rôles{% endif %}</span>
                        <svg class="{{ chevronSvg }}" width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="currentColor"/></svg>
                    </button>
                    <div class="{{ dropdownBase }}">
                        <label class="{{ optBase }}">
                            <input type="radio" name="role" value="" class="sr-only" {{ not filters.role ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ optLabel }}">Tous les rôles</span>
                        </label>
                        <div class="h-px bg-gray-200 mx-3.5 my-1.5"></div>
                        {% if isAdmin %}
                        <label class="{{ optBase }}">
                            <input type="radio" name="role" value="ROLE_ADMIN" class="sr-only" {{ filters.role == 'ROLE_ADMIN' ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ iconBase }} bg-error/10 text-error group-hover/opt:bg-error/[0.18]">
                                {% include '_atoms/icon/solar/shield.html.twig' with {size: 16} %}
                            </span>
                            <span class="{{ optLabel }}">Administrateur</span>
                        </label>
                        {% endif %}
                        <label class="{{ optBase }}">
                            <input type="radio" name="role" value="ROLE_COMPANY_MANAGER" class="sr-only" {{ filters.role == 'ROLE_COMPANY_MANAGER' ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ iconBase }} bg-blue-500/10 text-blue-700 group-hover/opt:bg-blue-500/[0.18]">
                                {% include '_atoms/icon/solar/star.html.twig' with {size: 16} %}
                            </span>
                            <span class="{{ optLabel }}">Gestionnaire</span>
                        </label>
                        <label class="{{ optBase }}">
                            <input type="radio" name="role" value="ROLE_COMMERCIAL" class="sr-only" {{ filters.role == 'ROLE_COMMERCIAL' ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ iconBase }} bg-emerald-500/10 text-emerald-700 group-hover/opt:bg-emerald-500/[0.18]">
                                {% include '_atoms/icon/solar/wallet.html.twig' with {size: 16} %}
                            </span>
                            <span class="{{ optLabel }}">Commercial</span>
                        </label>
                        <label class="{{ optBase }}">
                            <input type="radio" name="role" value="ROLE_USER" class="sr-only" {{ filters.role == 'ROLE_USER' ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ iconBase }} bg-primary/[0.08] text-primary group-hover/opt:bg-primary/[0.14]">
                                {% include '_atoms/icon/solar/user.html.twig' with {size: 16} %}
                            </span>
                            <span class="{{ optLabel }}">Utilisateur</span>
                        </label>
                    </div>
                </div>

                {# ---- Filtre statut ---- #}
                <div class="filter-multiselect relative group/filter"
                     data-admin--user-filters-target="multiselect">
                    <button type="button"
                            class="{{ triggerBase }} {{ filters.status ? 'border-primary bg-primary/[0.04] text-primary' : 'border-gray-200 text-gray-700 hover:border-gray-300' }}"
                            data-action="click->admin--user-filters#toggleDropdown">
                        <span class="shrink-0 {{ filters.status ? 'text-primary' : 'text-gray-400' }}">
                            {% include '_atoms/icon/solar/power.html.twig' with {size: 16} %}
                        </span>
                        <span>{% if filters.status == 'active' %}Actif{% elseif filters.status == 'inactive' %}Inactif{% else %}Statut{% endif %}</span>
                        <svg class="{{ chevronSvg }}" width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="currentColor"/></svg>
                    </button>
                    <div class="{{ dropdownBase }}">
                        <label class="{{ optBase }}">
                            <input type="radio" name="status" value="" class="sr-only" {{ not filters.status ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ optLabel }}">Tous les statuts</span>
                        </label>
                        <div class="h-px bg-gray-200 mx-3.5 my-1.5"></div>
                        <label class="{{ optBase }}">
                            <input type="radio" name="status" value="active" class="sr-only" {{ filters.status == 'active' ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ iconBase }} bg-success/10 text-success-dark group-hover/opt:bg-success/[0.18]">
                                {% include '_atoms/icon/solar/check.html.twig' with {size: 16} %}
                            </span>
                            <span class="{{ optLabel }}">Actif</span>
                        </label>
                        <label class="{{ optBase }}">
                            <input type="radio" name="status" value="inactive" class="sr-only" {{ filters.status == 'inactive' ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ iconBase }} bg-error/10 text-error group-hover/opt:bg-error/[0.18]">
                                {% include '_atoms/icon/solar/power.html.twig' with {size: 16} %}
                            </span>
                            <span class="{{ optLabel }}">Inactif</span>
                        </label>
                    </div>
                </div>

                {# ---- Filtre entreprise (admin) ---- #}
                {% if isAdmin %}
                <div class="filter-multiselect relative group/filter"
                     data-admin--user-filters-target="multiselect">
                    <button type="button"
                            class="{{ triggerBase }} {{ filters.company ? 'border-primary bg-primary/[0.04] text-primary' : 'border-gray-200 text-gray-700 hover:border-gray-300' }}"
                            data-action="click->admin--user-filters#toggleDropdown">
                        <span class="shrink-0 {{ filters.company ? 'text-primary' : 'text-gray-400' }}">
                            {% include '_atoms/icon/solar/buildings.html.twig' with {size: 16} %}
                        </span>
                        <span>{% if filters.company == 'none' %}Aucune entreprise{% elseif filters.company %}{% for company in companies %}{% if filters.company == company.id %}{{ company.name }}{% endif %}{% endfor %}{% else %}Entreprises{% endif %}</span>
                        <svg class="{{ chevronSvg }}" width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="currentColor"/></svg>
                    </button>
                    <div class="{{ dropdownBase }}">
                        <label class="{{ optBase }}">
                            <input type="radio" name="company" value="" class="sr-only" {{ not filters.company ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ optLabel }}">Toutes les entreprises</span>
                        </label>
                        <label class="{{ optBase }}">
                            <input type="radio" name="company" value="none" class="sr-only" {{ filters.company == 'none' ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ optLabel }}">Aucune entreprise</span>
                        </label>
                        {% if companies|length > 0 %}
                            <div class="h-px bg-gray-200 mx-3.5 my-1.5"></div>
                        {% endif %}
                        {% for company in companies %}
                            <label class="{{ optBase }}">
                                <input type="radio" name="company" value="{{ company.id }}" class="sr-only"
                                       {{ filters.company == company.id ? 'checked' }}
                                       data-action="change->admin--user-filters#selectAndClose">
                                <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                                <span class="{{ iconBase }} bg-primary/[0.08] text-primary group-hover/opt:bg-primary/[0.14]">
                                    {% include '_atoms/icon/solar/buildings.html.twig' with {size: 16} %}
                                </span>
                                <span class="{{ optLabel }}">{{ company.name }}</span>
                            </label>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {# ---- Filtre plan (admin only) ---- #}
                {% if isAdmin %}
                <div class="filter-multiselect relative group/filter"
                     data-admin--user-filters-target="multiselect">
                    <button type="button"
                            class="{{ triggerBase }} {{ filters.plan ? 'border-primary bg-primary/[0.04] text-primary' : 'border-gray-200 text-gray-700 hover:border-gray-300' }}"
                            data-action="click->admin--user-filters#toggleDropdown">
                        <span class="shrink-0 {{ filters.plan ? 'text-primary' : 'text-gray-400' }}">
                            {% include '_atoms/icon/solar/wallet.html.twig' with {size: 16} %}
                        </span>
                        <span>{% if filters.plan %}{% for plan in plans %}{% if filters.plan == plan.slug %}{{ plan.name }}{% endif %}{% endfor %}{% elseif filters.plan == 'none' %}Freemium{% else %}Plan{% endif %}</span>
                        <svg class="{{ chevronSvg }}" width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="currentColor"/></svg>
                    </button>
                    <div class="{{ dropdownBase }}">
                        <label class="{{ optBase }}">
                            <input type="radio" name="plan" value="" class="sr-only" {{ not filters.plan ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ optLabel }}">Tous les plans</span>
                        </label>
                        <div class="h-px bg-gray-200 mx-3.5 my-1.5"></div>
                        <label class="{{ optBase }}">
                            <input type="radio" name="plan" value="none" class="sr-only" {{ filters.plan == 'none' ? 'checked' }}
                                   data-action="change->admin--user-filters#selectAndClose">
                            <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                            <span class="{{ iconBase }} bg-gray-100 text-gray-500 group-hover/opt:bg-gray-200">
                                {% include '_atoms/icon/solar/user.html.twig' with {size: 16} %}
                            </span>
                            <span class="{{ optLabel }}">Freemium</span>
                        </label>
                        {% for plan in plans %}
                            {% if not plan.isFree() and not plan.isCustomPrice() %}
                            <label class="{{ optBase }}">
                                <input type="radio" name="plan" value="{{ plan.slug }}" class="sr-only"
                                       {{ filters.plan == plan.slug ? 'checked' }}
                                       data-action="change->admin--user-filters#selectAndClose">
                                <span class="{{ radioBase }}"><span class="{{ radioDot }}"></span></span>
                                <span class="w-[26px] h-[26px] rounded-md shrink-0 flex items-center justify-center"
                                      style="background: {{ plan.gradientCss ?? 'linear-gradient(135deg, #374151, #6b7280)' }}"></span>
                                <span class="{{ optLabel }}">{{ plan.name }}</span>
                            </label>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {# Barre de recherche #}
                <input type="text" name="search" value="{{ filters.search }}"
                       placeholder="Rechercher..."
                       class="w-full sm:w-auto px-4 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
                       data-action="input->admin--user-filters#filter">

                {# Bouton reset #}
                {% if filters.search or filters.role or filters.status or filters.company or filters.plan %}
                    <a href="{{ path('admin_user_list') }}"
                       class="self-end sm:self-auto inline-flex items-center justify-center w-[38px] h-[38px] rounded-lg text-gray-400 transition-all duration-200 hover:bg-error/10 hover:text-error"
                       data-tooltip="Réinitialiser les filtres">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/></svg>
                    </a>
                {% endif %}
            </form>
        </div>

        {# Tableau #}
        {% if users|length > 0 %}
            <div class="overflow-x-auto overflow-y-hidden rounded-b-2xl">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Utilisateur</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Rôle</th>
                            {% if isAdmin %}
                                <th class="hidden lg:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Entreprise</th>
                                <th class="hidden lg:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Plan</th>
                            {% endif %}
                            {# Tokens — en-tête triable (asc/desc), filtres courants préservés #}
                            {% set _tokNextDir = (sort == 'tokens' and dir == 'desc') ? 'asc' : 'desc' %}
                            <th class="hidden sm:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                                <a href="{{ path('admin_user_list', filters|filter(v => v is not null)|merge({sort: 'tokens', dir: _tokNextDir})) }}"
                                   class="inline-flex items-center gap-1 hover:text-gray-700 transition-colors">
                                    Tokens
                                    {% if sort == 'tokens' %}
                                        <span aria-hidden="true">{{ dir == 'asc' ? '▲' : '▼' }}</span>
                                    {% else %}
                                        <span class="text-gray-300" aria-hidden="true">↕</span>
                                    {% endif %}
                                </a>
                            </th>
                            {# Consommé (30 j) — en-tête triable (asc/desc), filtres courants préservés #}
                            {% set _consNextDir = (sort == 'consumed' and dir == 'desc') ? 'asc' : 'desc' %}
                            <th class="hidden sm:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                                <a href="{{ path('admin_user_list', filters|filter(v => v is not null)|merge({sort: 'consumed', dir: _consNextDir})) }}"
                                   class="inline-flex items-center gap-1 hover:text-gray-700 transition-colors">
                                    Consommé (30 j)
                                    {% if sort == 'consumed' %}
                                        <span aria-hidden="true">{{ dir == 'asc' ? '▲' : '▼' }}</span>
                                    {% else %}
                                        <span class="text-gray-300" aria-hidden="true">↕</span>
                                    {% endif %}
                                </a>
                            </th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Statut</th>
                            <th class="px-4 sm:px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        {% for user in users %}
                            <tr class="hover:bg-gray-50/50 transition-colors duration-150 cursor-pointer {{ not user.isActive ? 'opacity-50' : '' }}"
                                onclick="window.location='{{ path('admin_user_show', {uuid: user.uuid}) }}'">
                                {# Utilisateur #}
                                <td class="px-4 sm:px-6 py-3 sm:py-4">
                                    <div class="flex items-center gap-3">
                                        {% include '_atoms/avatar/avatar.html.twig' with {
                                            name: user.fullName,
                                            size: 'sm'
                                        } only %}
                                        <div class="min-w-0">
                                            <div class="flex items-center gap-1.5">
                                                <span class="text-sm font-medium text-gray-900 truncate">{{ user.fullName }}</span>
                                                {% if user.isBetaTester or 'ROLE_BETA_TESTER' in user.roles %}
                                                    <span class="text-warning" data-tooltip="Beta testeur">
                                                        {% include '_atoms/icon/icon.html.twig' with { name: 'star', size: 'xs', color: 'warning' } only %}
                                                    </span>
                                                {% endif %}
                                            </div>
                                            <span class="text-xs text-gray-500 truncate block">{{ user.email }}</span>
                                            {% if isAdmin and user.googleId %}
                                                <span class="text-xs text-gray-400 truncate block font-mono" data-tooltip="Google ID">G: {{ user.googleId }}</span>
                                            {% endif %}
                                            <span class="text-xs text-gray-400 tabular-nums">{{ user.createdAt|date('d/m/Y') }}</span>
                                        </div>
                                    </div>
                                </td>

                                {# Rôle #}
                                <td class="px-4 sm:px-6 py-3 sm:py-4">
                                    {% if 'ROLE_ADMIN' in user.roles %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: 'Admin',
                                            variant: 'error',
                                            size: 'sm'
                                        } only %}
                                    {% elseif 'ROLE_COMPANY_MANAGER' in user.roles %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: 'Gestionnaire',
                                            variant: 'cohorts',
                                            size: 'sm'
                                        } only %}
                                    {% elseif 'ROLE_COMMERCIAL' in user.roles %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: 'Commercial',
                                            variant: 'success',
                                            size: 'sm'
                                        } only %}
                                    {% else %}
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: 'Utilisateur',
                                            variant: 'primary',
                                            size: 'sm'
                                        } only %}
                                    {% endif %}
                                </td>

                                {# Entreprise (admin only) #}
                                {% if isAdmin %}
                                <td class="hidden lg:table-cell px-6 py-4">
                                    {% if user.company %}
                                        <span class="text-sm text-gray-700">{{ user.company.name }}</span>
                                    {% else %}
                                        <span class="text-sm text-gray-300">-</span>
                                    {% endif %}
                                </td>

                                {# Plan (admin only) #}
                                <td class="hidden lg:table-cell px-6 py-4">
                                    {% set sub = user.subscription %}
                                    {% set plan = sub ? sub.plan : null %}
                                    {% include '_atoms/plan-badge/plan-badge.html.twig' with {
                                        name: plan ? plan.name : null,
                                        gradient: plan ? plan.gradientCss : null,
                                        isFree: not (plan and not plan.isFree() and sub.isActive()),
                                        isAnnual: sub ? sub.isAnnual() : false,
                                        isB2B: user.isB2B()
                                    } only %}
                                </td>
                                {% endif %}

                                {# Tokens #}
                                <td class="hidden sm:table-cell px-6 py-4">
                                    {% if user.userToken %}
                                        <span class="text-sm font-medium text-gray-900 tabular-nums">{{ user.userToken.tokensRemaining|number_format(0, ',', ' ') }}</span>
                                    {% else %}
                                        <span class="text-sm text-gray-300">-</span>
                                    {% endif %}
                                </td>

                                {# Tokens consommés sur les 30 derniers jours #}
                                <td class="hidden sm:table-cell px-6 py-4">
                                    {% set consumed30d = tokensConsumed30d[user.id] ?? 0 %}
                                    {% if consumed30d > 0 %}
                                        <span class="text-sm font-medium text-gray-900 tabular-nums">{{ consumed30d|number_format(0, ',', ' ') }}</span>
                                    {% else %}
                                        <span class="text-sm text-gray-300">-</span>
                                    {% endif %}
                                </td>

                                {# Statut #}
                                <td class="px-4 sm:px-6 py-3 sm:py-4">
                                    <div class="flex flex-col items-start gap-1">
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            preset: user.isActive ? 'user-active' : 'user-inactive',
                                            size: 'sm'
                                        } only %}
                                        {% if not user.isEmailVerified %}
                                            {% include '_atoms/badge/badge.html.twig' with {
                                                label: 'Email non vérifié',
                                                variant: 'warning',
                                                size: 'xs'
                                            } only %}
                                        {% endif %}
                                    </div>
                                </td>

                                {# Actions #}
                                <td class="px-4 sm:px-6 py-3 sm:py-4 text-right" onclick="event.stopPropagation();">
                                    {% if user != app.user %}
                                        <button type="button"
                                                class="inline-flex items-center justify-center w-9 h-9 rounded-lg transition-colors {{ user.isActive ? 'bg-error/10 text-error hover:bg-error/20' : 'bg-success/10 text-success hover:bg-success/20' }}"
                                                data-tooltip="{{ user.isActive ? 'Désactiver' : 'Activer' }}"
                                                data-controller="admin--user-toggle"
                                                data-admin--user-toggle-url-value="{{ path('admin_user_toggle', {uuid: user.uuid}) }}"
                                                data-admin--user-toggle-token-value="{{ csrf_token('toggle-user-' ~ user.uuid) }}"
                                                data-admin--user-toggle-user-name-value="{{ user.fullName }}"
                                                data-admin--user-toggle-active-value="{{ user.isActive ? 'true' : 'false' }}"
                                                data-action="click->admin--user-toggle#toggle">
                                            {% include '_atoms/icon/icon.html.twig' with { name: 'power', size: 'sm', color: user.isActive ? 'error-dark' : 'success-dark', opacitySecondary: '1' } only %}
                                        </button>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {# Pagination - Utilise la molécule atomique #}
            {% if pagination.total > 1 %}
                <div class="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
                    <span class="text-sm text-gray-500">
                        Page {{ pagination.current }} sur {{ pagination.total }}
                        <span class="text-gray-400 ml-1">({{ pagination.totalItems }} utilisateurs)</span>
                    </span>
                    {# Conserve tous les filtres actifs (recherche, rôle, statut, entreprise, plan)
                       ainsi que le tri courant lors du changement de page. #}
                    {% set paginationFilters = filters|filter(v => v is not null and v != '') %}
                    {% if sort %}{% set paginationFilters = paginationFilters|merge({sort: sort, dir: dir}) %}{% endif %}
                    {% include '_molecules/pagination/pagination.html.twig' with {
                        currentPage: pagination.current,
                        totalPages: pagination.total,
                        baseUrl: path('admin_user_list', paginationFilters),
                        size: 'sm',
                        showInfo: false,
                        showFirstLast: true
                    } only %}
                </div>
            {% endif %}
        {% else %}
            <div class="p-8">
                {% include '_molecules/empty-state/empty-state.html.twig' with {
                    title: 'Aucun utilisateur trouvé',
                    description: 'Aucun utilisateur ne correspond à vos critères de recherche.',
                    icon: 'users',
                    variant: 'minimal',
                    actions: (isAdmin or app.user.isActive) ? [{
                        label: 'Créer un utilisateur',
                        href: path('admin_user_new'),
                        variant: 'primary',
                        icon: 'plus'
                    }] : []
                } only %}
            </div>
        {% endif %}
    </section>
</div>
{% endblock %}