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

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

{% block body %}
<div class="mb-8">
    <h1 class="text-3xl font-black uppercase tracking-tighter italic">Utilisateurs</h1>
    <p class="text-white/60 font-bold mt-1">{{ users|length }} utilisateur{{ users|length > 1 ? 's' : '' }} enregistre{{ users|length > 1 ? 's' : '' }}.</p>
</div>

<div class="glass p-6">
    <div class="overflow-x-auto">
        <table class="admin-table">
            <thead>
                <tr class="text-white/60 text-xs font-bold uppercase tracking-widest">
                    <th class="border-b border-white/10">Nom</th>
                    <th class="border-b border-white/10">Email</th>
                    <th class="border-b border-white/10">Roles</th>
                    <th class="border-b border-white/10">Verifie</th>
                    <th class="border-b border-white/10">Approuve</th>
                    <th class="border-b border-white/10">Inscription</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr class="hover:bg-white/5 transition-all">
                    <td class="border-b border-white/5 font-bold">{{ user.firstName }} {{ user.lastName }}</td>
                    <td class="border-b border-white/5 text-white/70">{{ user.email }}</td>
                    <td class="border-b border-white/5">
                        {% for role in user.roles %}
                            <span class="inline-block px-2 py-0.5 text-xs font-bold rounded-lg {{ role == 'ROLE_ROOT' ? 'bg-red-500/20 text-red-400' : (role == 'ROLE_ORGANIZER' ? 'bg-indigo-500/20 text-indigo-400' : 'bg-white/10 text-white/60') }}">{{ role }}</span>
                        {% endfor %}
                    </td>
                    <td class="border-b border-white/5">
                        {% if user.verified %}<span class="text-green-400">&#10003;</span>{% else %}<span class="text-white/30">&#10005;</span>{% endif %}
                    </td>
                    <td class="border-b border-white/5">
                        {% if user.approved %}<span class="text-green-400">&#10003;</span>{% else %}<span class="text-white/30">&#10005;</span>{% endif %}
                    </td>
                    <td class="border-b border-white/5 text-white/50 text-sm">{{ user.createdAt|date('d/m/Y') }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
