{% block body %}


    <div class="card col-4 mt-3 me-3 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 }}">

        <div class="card-title shadow-sm p-3 d-flex ">
            <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>

        {#    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 == "ROLE ADMIN SUDALYS" or firstRole.name == "ROLE ADMIN" %}
                        <span class="badge bg-danger">{{ firstRole.name|capitalize }}</span>
                    {% elseif firstRole.name == "ROLE USER" %}
                        <span class="badge bg-primary">{{ firstRole.name|capitalize }}</span>
                    {% else %}
                        <span class="badge bg-success">{{ 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 %}
                    <div class="col">
                        {{ app.name }}
                        <img src="{{ asset(app.logoUrl) }}" alt="Logo {{ app.name }}" class="img-fluid ms-2" style="height: 20px; width: 20px;">
                    </div>
                {% 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 == "ROLE ADMIN SUDALYS" or role.name == "ROLE ADMIN" %}
                            <span class="badge bg-danger">{{ role.name|capitalize }}</span>
                        {% elseif role.name == "ROLE USER" %}
                            <span class="badge bg-primary">{{ role.name|capitalize }}</span>
                        {% else %}
                            <span class="badge bg-success">{{ 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 %}