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

{% block title %}Liste Utilisateur{% endblock %}

{% block body %}
<style>
    .user-table {
        width: 100%;
        border-collapse: collapse;
        font-family: sans-serif;
    }

    .user-table th,
    .user-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .user-table th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    .user-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .user-table tr:hover {
        background-color: #f1f1f1;
    }

    .btn-container {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .btn {
        padding: 5px 10px;
        text-decoration: none;
        color: white;
        background-color: #007bff;
        border-radius: 5px;
        font-weight: bold;
        margin-top: 25px;
    }

</style>

<div class="example-wrapper">
    <h1>Liste des Utilisateurs ! ✅</h1>

    <table class="user-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>Nom</th>
            <th>Prenom</th>
            <th>Mail</th>
            <th>Roles</th>
        </tr>
        </thead>
        <tbody>
        {% for utilisateur in utilisateurs %}
            <tr>
                <td>{{ utilisateur.id }}</td>
                <td>{{ utilisateur.nom }}</td>
                <td>{{ utilisateur.prenom }}</td>
                <td>{{ utilisateur.UserIdentifier }}</td>
                <td>{{ utilisateur.roles|join }}</td>
            </tr>
        {% else %}
            <tr>
                <td colspan="5">Aucun utilisateur trouvé.</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="btn-container">
        <a href="{{ path('add_user') }}" class="btn btn-primary">Ajouter un Utilisateur</a>
    </div>
</div>
{% endblock %}