{% block body %}

    <div class="card border-0">
        <div class="card-title p-3 d-flex justify-content-between align-items-center ">
            <h3>{{ title }}</h3>
            {% if organizationId is defined %}
                <a href="{{ path('user_new', {'organizationId': organizationId}) }}" class="btn btn-primary">Ajouter un utilisateur</a>
            {% endif %}
        </div>
        <div class="card-body">
            <table class="table align-middle table-borderless">
                <thead class="table-light">
                <tr>
                    <th>Picture</th>
                    <th>Email</th>
                    <th>Visualiser</th>
                </tr>
                </thead>
                <tbody>
                {% if users|length == 0 %}
                    <tr>
                        <td colspan="3" class="text-center">{{ empty_message }}</td>
                    </tr>
                {% else %}
                    {% for user in 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.email }}</td>
                            <td>
                                <a href="{{ path('user_show', {'id': user.id}) }}"
                                   class="p-3 align-middle color-primary">
                                    {{ ux_icon('fa6-regular:eye', {height: '30px', width: '30px'}) }}
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                {% endif %}
                </tbody>
            </table>
        </div>
    </div>

{% endblock %}