{% extends '@ChillMain/Admin/layoutWithVerticalMenu.html.twig' %}

{% block title %}{{ 'PermissionsGroup "%name%" edit'|trans( { '%name%': entity.name } ) }}{% endblock %}

{% block admin_content -%}
<div class="container-xxl">
    <div class="row">

        <h1 class="mb-4">{{ 'PermissionsGroup "%name%" edit'|trans( { '%name%': entity.name } ) }}</h1>

        <h2>{{ 'Details'|trans }}</h2>

        {{ form_start(edit_form) }}
        {{ form_row(edit_form.name) }}
        {% if edit_form.flags is defined %}
        {{ form_row(edit_form.flags) }}
        {% endif %}
        {{ form_row(edit_form.submit, { 'attr': { 'class': 'btn btn-save float-end' } } ) }}
        {{ form_end(edit_form) }}

        <h2 class="mb-5">{{ 'Grant those permissions'|trans }} :</h2>

        {%- if entity.getRoleScopes|length > 0 -%}
        {% for title, role_scopes in role_scopes_sorted %}

        <h3>{{ title|default("Unclassified")|trans }}</h3>

        <table class="table table-bordered border-dark align-middle mb-5">
            <thead>
                <tr>
                    <th>{{ 'Circle'|trans }}</th>
                    <th class="w-75">{{ 'Role'|trans }}</th>
                    <th>{{ 'Actions'|trans }}</th>
                </tr>
            </thead>
            <tbody>

        {% for role_scope in role_scopes %}
            <tr>
                <td style="width: 7em">
                    {%- if role_scope.scope is not null -%}
                        <span class="role_scope scope">
                        {{ role_scope.scope.name|localize_translatable_string }}
                    </span>
                    {%- else -%}
                        <small><i>N/A</i></small>
                    {%- endif -%}
                </td>
                <td>
                    <span class="role_scope role">{{ role_scope.role|trans }}</span>
                    {% if expanded_roles[role_scope.role]|length > 1 %}
                        <div class="help-text">
                            <span style="text-decoration: underline dotted;">{{ 'Which implies'|trans }}&nbsp;:</span>
                            {% for role in expanded_roles[role_scope.role] %}
                                {% if role != role_scope.role  %}
                                    {{ role|trans }}
                                    {% if not loop.last %}, {% endif %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% endif %}
                </td>
                <td style="width: 7em">
                    {{ form_start(delete_role_scopes_form[role_scope.id]) }}
                    {{ form_widget(delete_role_scopes_form[role_scope.id].submit, { 'attr': { 'class': 'btn btn-remove' } } ) }}
                    {{ form_end(delete_role_scopes_form[role_scope.id]) }}
                </td>
            </tr>

        {% endfor %}
            </tbody>
        </table>
        {% endfor %}

        {%- else -%}
            <p>{{ 'This group does not provide any permission'|trans }}</p>
        {%- endif -%}

    </div>
    <div class="row sticky-form">

        <h2>{{ 'Grant new permissions'|trans }}</h2>

        {{ form_start(add_role_scopes_form) }}
        {{ form_errors(add_role_scopes_form) }}

        <div class="input-group">
            {{ form_widget(add_role_scopes_form.composed_role_scope.role, { 'attr': { 'class': 'w-50' }}) }}
            {{ form_widget(add_role_scopes_form.composed_role_scope.scope) }}
        </div>
        <div id="role_scope_legend" class="help-text mb-3">{{ 'Help to pick role and scope'|trans }}</div>

        <ul class="record_actions sticky-form-buttons">
            <li class="cancel">
                <a href="{{ path('admin_permissionsgroup') }}" class="btn btn-cancel">
                    {{ 'Back to the list'|trans }}
                </a>
                <a href="{{ path('admin_permissionsgroup_show', { 'id': entity.id }) }}" class="btn btn-misc">{{ 'Cancel'|trans }}</a>
            </li>
            <li>
                {{ form_widget(add_role_scopes_form.submit, { 'attr' : { 'class': 'btn btn-create' } } ) }}
            </li>
        </ul>

        {{ form_end(add_role_scopes_form) }}
    </div>

</div>
{% endblock %}

{% block js %}
<script>

    // An event listener give contextual legend when choosing an option.
    const select = document.getElementById('form_composed_role_scope_role');
    const legend = document.getElementById('role_scope_legend');

    select.addEventListener('change', function() {
        const option = this.options[this.selectedIndex];
        const hasScope = option.getAttribute('data-has-scope');
        legend.style.display = 'block';
        if (hasScope === '0') {
            legend.innerText = '{{ 'The role does not need scope'|trans }}';
        } else if (hasScope === '1') {
            legend.innerText = '{{ 'The role need scope'|trans }}';
        } else {
            legend.innerText = '{{ 'Help to pick role and scope'|trans }}';
        }
    });

</script>
{% endblock %}
