{% block body %}


    <div class="card col-4 mt-3 me-3" >
        <div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center">
            {#  Affichage du nom de l'organisation et de l'icône de flèche #}
            <div class="d-flex user-org-card"
                 style="cursor:pointer;" data-bs-toggle="collapse"
                 data-bs-target="#org-details-{{ organization.id }}" aria-expanded="false"
                 aria-controls="org-details-{{ organization.id }}">
                <h2 class=" pe-2">{{ organization.name|capitalize }}</h2>
                <i class="pt-2" id="arrow-icon-{{ organization.id }}">
                    {{ ux_icon('fa6-regular:circle-down', {height: '25px', width: '25px'})  }}
                </i>
            </div>
            {% if is_granted("ROLE_ADMIN") %}
            <a href="{{ path('user_organization_edit', {'id': uoId}) }}" class="btn btn-primary" >Modifier</a>
            {% endif %}
        </div>

        {#    Information principale sur l'utilisateur dans l'organisation#}
        <div class="card-body">
            {#  Affichage du plus haut role #}
            <p><b>Role:</b>
                {% if roles|length > 0 %}
                    {% set firstRole = roles[0] %}
                        {% if firstRole.name == "SUPER ADMIN" %}
                            <span class="badge bg-danger">Super Administrateur</span>
                        {% elseif firstRole.name == "ADMIN" %}
                            <span class="badge bg-danger">Administrateur</span>
                        {% else %}
                        <span class="badge bg-primary">{{ firstRole.name|capitalize }}</span>
                    {% endif %}
                {% else %}
                    Aucun rôle
                {% endif %}
            </p>

            {#  Affichage des applications dont l'utilisateur à accès #}
            <div class="d-flex">
            {% if apps is not empty %}
                {% for app in apps %}
                        <img src="{{ asset(app.logoUrl) }}" alt="Logo {{ app.name }}" class="img-fluid ms-2" style="height: 30px; width: 30px;">
                {% endfor %}
            {% else %}
                Aucune application associée.
            {% endif %}
            </div>
        </div>

        {#  Détails supplémentaires sur l'organisation #}
        <div class="collapse card-body border-top" id="org-details-{{ organization.id }}">
            {% if roles|length > 1 %}
                <p><b>Autres rôles:</b>
                    {% for role in roles|slice(1) %}
                        {% if role.name == "SUPER ADMIN"%}
                            <span class="badge bg-danger">Super Administrateur</span>
                        {% elseif role.name == "ADMIN" %}
                            <span class="badge bg-danger">Administrateur</span>
                        {% else %}
                            <span class="badge bg-primary">{{ role.name|capitalize }}</span>
                        {% endif %}
                        {% if not loop.last %} - {% endif %}
                    {% endfor %}
                </p>
            {% endif %}
            <p><b>Membre depuis:</b> {{ organization.createdAt|date('d/m/Y') }}</p>
        </div>
    </div>

{% endblock %}

{% block javascript %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
    var collapseEl = document.getElementById('org-details-{{ organization.id }}');
    var arrowEl = document.getElementById('arrow-icon-{{ organization.id }}');
    if (collapseEl && arrowEl) {
        collapseEl.addEventListener('show.bs.collapse', function () {
            arrowEl.innerHTML = `{{ ux_icon('fa6-regular:circle-up', {height: '25px', width: '25px'})|e('js') }}`;
        });
        collapseEl.addEventListener('hide.bs.collapse', function () {
            arrowEl.innerHTML = `{{ ux_icon('fa6-regular:circle-down', {height: '25px', width: '25px'})|e('js') }}`;
        });
    }
    });

</script>
{% endblock %}