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

{% block title %}User Profile{% endblock %}

{% block body %}
    <div class="w-100 h-100 p-5 m-auto" data-controller="user">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>Gestion Utilisateurs</h1>
            <a href="{{ path('user_new') }}" class="btn btn-primary">Ajouter un utilisateur</a>
        </div>

        {% for org in usersByOrganization %}
            <h2 class="mt-5 mb-3">{{ org.organization_name|title }}</h2>
            <table class="table align-middle shadow">
                <thead class="table-light shadow-sm">
                <tr>
                    <th>Picture</th>
                    <th>Surname</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Visualiser</th>
                </tr>
                </thead>
                <tbody>
                {% for user in org.users %}
                    <tr>
                        <td>
                            {% if user.pictureUrl %}
                                <img src="{{ asset(user.pictureUrl) }}" alt="User profile pic" class="rounded-circle" style="width:40px; height:40px;">
                            {% endif %}
                        </td>
                        <td>{{ user.surname }}</td>
                        <td>{{ user.name }}</td>
                        <td>{{ user.email }}</td>
                        <td>
                            <a href="{{ path('user_show', {'id': user.id}) }}" class="p-3 align-middle">
                                <i class="icon-grid menu-icon color-primary">
                                    {{ ux_icon('fa6-regular:eye', {height: '30px', width: '30px'}) }}
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                {% if org.users|length == 0 %}
                    <tr>
                        <td colspan="5" class="text-center">Aucun utilisateur trouvé.</td>
                    </tr>
                {% endif %}
                </tbody>
            </table>
        {% endfor %}
    </div>
{% endblock %}