{% extends 'layout.html' %}

{% block title %}Gérer les Utilisateurs | Forum Communautaire{% endblock %}

{% block breadcrumb %}
<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
<span class="mx-2">/</span>
<a href="{{ url_for('admin.dashboard') }}" class="hover:text-blue-600">Administration</a>
<span class="mx-2">/</span>
<span class="text-gray-700">Gérer les Utilisateurs</span>
{% endblock %}

{% block content %}
<div class="bg-white rounded-lg shadow-sm p-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">Gérer les Utilisateurs</h1>
        
        <div class="flex">
            <form method="get" action="{{ url_for('admin.manage_users') }}" class="flex mr-2">
                <input type="search" name="q" placeholder="Rechercher un utilisateur..." 
                       class="px-4 py-2 border border-gray-300 rounded-l-lg focus-ring"
                       value="{{ request.args.get('q', '') }}">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 focus:outline-none focus:ring">
                    <i data-feather="search" class="w-5 h-5"></i>
                </button>
            </form>
        </div>
    </div>
    
    {% if users.items %}
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Utilisateur
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Email
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Rôle
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Statut
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Inscription
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for user in users.items %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-10 w-10">
                                <img class="h-10 w-10 rounded-full object-cover" 
                                     src="{{ url_for('static', filename='uploads/avatars/' + user.avatar) if user.avatar else url_for('static', filename='uploads/avatars/default.png') }}" 
                                     alt="{{ user.username }}">
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">
                                    {{ user.username }}
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">{{ user.email }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {% if user.role == 'admin' %}
                                bg-purple-100 text-purple-800
                            {% elif user.role == 'moderator' %}
                                bg-blue-100 text-blue-800
                            {% else %}
                                bg-green-100 text-green-800
                            {% endif %}">
                            {% if user.role == 'admin' %}
                                Administrateur
                            {% elif user.role == 'moderator' %}
                                Modérateur
                            {% else %}
                                Membre
                            {% endif %}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if user.is_banned %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                Banni
                            </span>
                        {% elif not user.is_active %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                Inactif
                            </span>
                        {% else %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                Actif
                            </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ user.created_at | format_datetime }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            <a href="{{ url_for('user.profile', username=user.username) }}" class="text-blue-600 hover:text-blue-900">
                                <i data-feather="eye" class="w-4 h-4"></i>
                                <span class="sr-only">Voir</span>
                            </a>
                            <a href="{{ url_for('admin.edit_user', id=user.id) }}" class="text-green-600 hover:text-green-900">
                                <i data-feather="edit" class="w-4 h-4"></i>
                                <span class="sr-only">Modifier</span>
                            </a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    {% if users.pages > 1 %}
    <div class="mt-4 flex justify-center">
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            {% if users.has_prev %}
            <a href="{{ url_for('admin.manage_users', page=users.prev_num, q=request.args.get('q', '')) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <span class="sr-only">Précédent</span>
                <i data-feather="chevron-left" class="w-5 h-5"></i>
            </a>
            {% else %}
            <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
                <span class="sr-only">Précédent</span>
                <i data-feather="chevron-left" class="w-5 h-5"></i>
            </span>
            {% endif %}
            
            {% for page_num in users.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
                {% if page_num %}
                    {% if page_num == users.page %}
                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600">
                        {{ page_num }}
                    </span>
                    {% else %}
                    <a href="{{ url_for('admin.manage_users', page=page_num, q=request.args.get('q', '')) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                        {{ page_num }}
                    </a>
                    {% endif %}
                {% else %}
                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                    ...
                </span>
                {% endif %}
            {% endfor %}
            
            {% if users.has_next %}
            <a href="{{ url_for('admin.manage_users', page=users.next_num, q=request.args.get('q', '')) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <span class="sr-only">Suivant</span>
                <i data-feather="chevron-right" class="w-5 h-5"></i>
            </a>
            {% else %}
            <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
                <span class="sr-only">Suivant</span>
                <i data-feather="chevron-right" class="w-5 h-5"></i>
            </span>
            {% endif %}
        </nav>
    </div>
    {% endif %}
    
    {% else %}
    <div class="bg-gray-50 p-6 text-center rounded-lg">
        <p class="text-gray-600">Aucun utilisateur trouvé.</p>
    </div>
    {% endif %}
</div>
{% endblock %}