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

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="fas fa-users me-2"></i> Gestion des utilisateurs</h1>
        <a href="{{ url_for('admin.add_user') }}" class="btn btn-primary">
            <i class="fas fa-user-plus me-2"></i> Ajouter un utilisateur
        </a>
    </div>
    
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover datatable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nom d'utilisateur</th>
                            <th>Email</th>
                            <th>Rôle</th>
                            <th>Date de création</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if users %}
                            {% for user in users %}
                                <tr>
                                    <td>{{ user.id }}</td>
                                    <td>{{ user.username }}</td>
                                    <td>{{ user.email }}</td>
                                    <td>
                                        {% if user.role == 'admin' %}
                                            <span class="badge bg-danger">Administrateur</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Utilisateur</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ user.created_at.strftime('%d/%m/%Y') }}</td>
                                    <td class="text-end">
                                        <a href="{{ url_for('admin.edit_user', id=user.id) }}" class="btn btn-sm btn-info me-1" data-bs-toggle="tooltip" title="Modifier">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        {% if user.id != current_user.id %}
                                            <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="{{ user.id }}" data-name="{{ user.username }}" data-type="l'utilisateur" data-action="{{ url_for('admin.delete_user', id=user.id) }}" data-bs-toggle="tooltip" title="Supprimer">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        {% else %}
                                            <button type="button" class="btn btn-sm btn-danger" disabled data-bs-toggle="tooltip" title="Vous ne pouvez pas supprimer votre propre compte">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="6" class="text-center">Aucun utilisateur disponible</td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize DataTable
        $('.datatable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            },
            order: [[0, 'asc']], // Sort by ID ascending by default
            responsive: true
        });
    });
</script>
{% endblock %}
