{% block body %}

    <div class="card border-0 p-3 mb-4">

        {% if title is defined %}
            <div class="card-title d-flex justify-content-between align-items-center ">
                <h3>{{ title }}</h3>
                {% if organizationId %}

                {% endif %}
            </div>
        {% endif %}
        <div class="card-body">

            <table class="table align-middle ">
                <thead class="table-light">
                <tr>
                    <th>Picture</th>
                    <th>Surname</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Statut</th>
                    <th>Visualiser</th>
                </tr>
                </thead>
                <tbody>
                {% if users|length == 0 %}
                    <tr>
                        <td colspan="6" class="text-center">Aucun utilisateur trouvé dans cette organisation.</td>
                    </tr>
                {% else %}
                    {% for user in users %}
                        <tr>
                            <td>
                                {% if user.entity.pictureUrl %}
                                    <img src="{{ aws_url ~ user.entity.pictureUrl }}" alt="User profile pic"
                                         class="rounded-circle"
                                         style="width:40px; height:40px;">
                                {% else %}
                                    <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center"
                                         style="width:40px; height:40px;">
                                        <span class="text-white">{{ user.entity.name|first|upper }}{{ user.entity.surname|first|upper }}</span>
                                    </div>
                                {% endif %}
                            </td>
                            <td>{{ user.entity.surname }}</td>
                            <td>{{ user.entity.name }}</td>
                            <td>{{ user.entity.email }}</td>
                            {#                            Logic for status #}
                            <td>
                                {#                        check if the user is active in the organization link #}
                                {% if user.isActive is defined %}
                                    {% if user.isActive %}
                                        {% if user.connected %}
                                            <span class="badge bg-success">Actif</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Inactif</span>
                                        {% endif %}
                                    {% else %}
                                        <span class="badge bg-danger">Désactivé</span>
                                    {% endif %}
                                    {#                        if no organization link #}
                                {% else %}
                                    {% if user.connected %}
                                        <span class="badge bg-success">Actif</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Inactif</span>
                                    {% endif %}
                                {% endif %}
                            </td>
                            <td>
                                {% if organizationId is defined and organizationId %}
                                    <a href="{{ path('user_show', {'id': user.entity.id, 'organizationId': organizationId}) }}"
                                       class="p-3 align-middle color-primary">
                                        {{ ux_icon('fa6-regular:eye', {height: '30px', width: '30px'}) }}
                                    </a>
                                {% else %}
                                    <a href="{{ path('user_show', {'id': user.entity.id}) }}"
                                       class="p-3 align-middle color-primary">
                                        {{ ux_icon('fa6-regular:eye', {height: '30px', width: '30px'}) }}
                                    </a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                {% endif %}

                </tbody>
            </table>
        </div>
    </div>
{% endblock %}