{% block body %}
    {% set roles = uoa.roles %}
{#    TODO: compare style with/without border#}
    <div class="card col-6">
        <div class="card-header d-flex gap-2">
            {% if uoa.application.logoUrl %}
                <img src="{{ asset(uoa.application.logoUrl) }}" alt="Logo {{ uoa.application.name }}"
                     class="rounded-circle " style="width:50px; height:50px;">
            {% endif %}
            <div class="card-title">
                <h1>{{ uoa.application.name|title }}</h1>
            </div>

        </div>
        <div class="card-body">
            <div class="row">
{#                TODO: pb avec le |raw retour à la ligne#}
{#                 maybe remove Description label #}
                <p><b> Description : </b>{{ uoa.application.descriptionSmall|default('Aucune description disponible.')|raw }}</p>
            </div>
            {% if is_granted('ROLE_ADMIN') %}
{#                TODO: Can be turn into an ajax function#}
                <form method="POST"
                      action="{{ path('user_application_role', { id : uoa.uoId }) }}"
                      data-controller="user"
                      data-user-roles-array-value="{{ uoa.rolesArray|json_encode }}"
                      data-user-selected-role-ids-value="{{ uoa.selectedRoleIds|json_encode }}">
                    <div class="form-group mb-3">
                        <label for="roles-{{ uoa.application.id }}"><b>Rôles :</b></label>
                        <select data-user-target="select"
                                class="choices"
                                id="roles-{{ uoa.application.id }}"
                                name="roles[]"
                                multiple>
                        </select>
                    </div>
                    <input hidden type="text" value="{{ uoa.application.id }}" name="applicationId">
                    <button type="submit" class="btn btn-primary">Sauvegarder</button>
                </form>
            {% else %}
                <label for="roles-{{ uoa.application.id }}"><b>Rôles :</b></label>
                <select data-user-target="select"
                        class="choices"
                        id="roles-{{ uoa.application.id }}"
                        name="roles[]"
                        data-controller="user"
                        data-user-roles-array-value="{{ uoa.rolesArray|json_encode }}"
                        data-user-selected-role-ids-value="{{ uoa.selectedRoleIds|json_encode }}"
                        multiple
                        disabled>
                </select>
            {% endif %}
        </div>
    </div>


{% endblock %}