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

{% block title 'Membre(s)' %}
{% block page_title 'Liste des Membres' %}

{% block body %}
    {# Définition d'un mappage pour traduire les rôles stockés vers les libellés affichés #}
    {% set roleDisplay = {
        'President': 'Président(e)',
        'Tresorier': 'Trésorier(e)',
        'Secretaire': 'Secrétaire(e)',
        'VicePresident': 'Vice-Président(e)',
        'TresorierAdjoint': 'Trésorier(e) Adjoint',
        'SecretaireAdjoint': 'Secrétaire(e) Adjoint',
        'Membre': 'Membre',
    } %}

    <div class="flex justify-end mb-6">
        <a href="{{ path('admin_member_create') }}"
           class="dz items-center px-4 py-2 border border-transparent text-sm font-medium
rounded-lg shadow-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2
focus:ring-offset-2 focus:ring-indigo-500 transition duration-150">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
            Créer un membre
        </a>
    </div>


    <div class="overflow-x-auto rounded-lg shadow-xl border border-gray-700">
        <table class="min-w-full divide-y divide-gray-700">

            {# --- EN-TÊTE DU TABLEAU (HEAD) --- #}
            <thead class="bg-gray-800">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
                    Pseudo
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
                    Rôle
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
                    Rejoint le
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
                    Statut
                </th>
                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">
                    Actions
                </th>
            </tr>
            </thead>

            {# --- CORPS DU TABLEAU (BODY) --- #}
            <tbody class="bg-gray-800 divide-y divide-gray-700">

            {% if members is not empty %}
                {% for member in members %}
                    <tr class="hover:bg-gray-700 transition duration-150">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-white">{{ member.pseudo }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            {# Détermination de la couleur en fonction du Rôle stocké #}
                            {% set roleKey = member.role %}
                            {% set roleColor = (roleKey == 'President' or roleKey == 'VicePresident') ? 'bg-red-500' :
                                (roleKey == 'Secretaire' or roleKey == 'Tresorier') ? 'bg-indigo-500' :
                                (roleKey == 'Membre') ? 'bg-gray-500' : 'bg-green-600' %}

                            {# Affichage du libellé français grâce au mappage #}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full text-white {{ roleColor }}">
                        {{ roleDisplay[roleKey] | default(roleKey) }}
                    </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-300">
                                {# Assurez-vous que joined_at est un objet DateTime ou une chaîne Twig #}
                                {{ member.joinedAt | date('d/m/Y') }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            {# Détermination du badge de statut (actif, inactif, suspendu) #}
                            {% set statusColor = (member.status == 'actif') ? 'bg-green-500' :
                                (member.status == 'inactif') ? 'bg-yellow-500' :
                                'bg-red-600' %}

                            {% set statusText = (member.status == 'actif') ? 'Actif' :
                                (member.status == 'inactif') ? 'Inactif' :
                                'Suspendu' %}

                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full text-white {{ statusColor }}">
                        {{ statusText }}
                    </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <a href="{{ path('admin_member_edit', {id: member.id}) }}"
                               class="text-indigo-400 hover:text-indigo-300 mr-4 transition duration-150">
                                Éditer
                            </a>
                            <a href="{{ path('admin_member_delete', {id: member.id}) }}"
                               class="text-red-400 hover:text-red-300 transition duration-150">
                                Supprimer
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            {% else %}
                {# Message si la liste est vide #}
                <tr>
                    <td colspan="5" class="px-6 py-12 text-center text-gray-500">
                        Aucun membre trouvé. Veuillez créer un nouveau membre.
                    </td>
                </tr>
            {% endif %}

            </tbody>
        </table>


    </div>
{% endblock %}
