{% extends '@OroUI/actions/update.html.twig' %}
{% import '@OroDataGrid/macros.html.twig' as dataGrid %}

{% set entityId = form.vars.value.id %}
{% oro_title_set({params : { "%role%": form.vars.value.label, "%entityName%": 'oro.user.role.entity_label'|trans } }) %}
{% set gridName = 'role-users-grid' %}
{% set formAction = entityId ? path('oro_user_role_update', { 'id': entityId}) : path('oro_user_role_create') %}

{% block navButtons %}
    {% import '@OroUI/macros.html.twig' as UI %}

    {{ parent() }}
    {% if entityId and is_granted('DELETE', form.vars.value) %}
        {{ UI.deleteButton({
                'dataUrl': path('oro_api_delete_role', {'id': entityId}),
                'dataRedirect': path('oro_user_role_index'),
                'aCss': 'no-hash remove-button',
                'dataId': entityId,
                'id': 'btn-remove-role',
                'entity_label': 'oro.user.role.entity_label'|trans,
                'disabled': not allow_delete
            })
        }}
        {{ UI.buttonSeparator() }}
    {% endif %}
    {{ UI.cancelButton(path('oro_user_role_index')) }}
    {% set html = UI.saveAndCloseButton({
        'class': 'btn-success role-submit',
        'route': 'oro_user_role_view',
        'params': {'id': '$id', '_enableContentProviders': 'mainMenu'}
    }) %}
    {% if is_granted('oro_user_role_create') %}
        {% set html = html ~ UI.saveAndNewButton({
            'route': 'oro_user_role_create'
        }) %}
    {% endif %}
    {% if form.vars.value.id or is_granted('oro_user_role_update') %}
        {# button attribute 'action' is avoided because of there is unacceptable submit binding on .action-button in init-layout.js #}
        {% set html = html ~ UI.saveAndStayButton({
            'class': 'btn-success main-group role-submit',
            'route': 'oro_user_role_update',
            'params': {'id': '$id', '_enableContentProviders': 'mainMenu'}
        }) %}
    {% endif %}
    {{ UI.dropdownSaveButton({'html': html}) }}
    {% set fields = [] %}
    {% for name, child in form %}
        {% if name not in ['appendUsers', 'removeUsers', 'privileges'] %}
            {% set fields = fields|merge({(name): '#' ~ child.vars.id}) %}
        {% endif %}
    {% endfor %}
    {% set options = {
        elSelector: '.btn-success.role-submit',
        formName: form.vars.name,
        formSelector: '#' ~ form.vars.id,
        privilegesSelector: '#' ~ form.privileges.vars.id,
        appendUsersSelector: '#roleAppendUsers',
        removeUsersSelector: '#roleRemoveUsers',
        fields : fields
    } %}
    <div data-page-component-module="orouser/js/views/role-view"
         data-page-component-options="{{ options|json_encode }}">
    </div>
{% endblock navButtons %}

{% block pageHeader %}
    {% if entityId %}
        {% set breadcrumbs = {
            'entity':      form.vars.value,
            'indexPath':   path('oro_user_role_index'),
            'indexLabel': 'oro.user.role.entity_plural_label'|trans,
            'entityTitle': form.vars.value.label
        }
        %}
        {{ parent() }}
    {% else %}
        {% set title = 'oro.ui.create_entity'|trans({'%entityName%': 'oro.user.role.entity_label'|trans}) %}
        {% include '@OroUI/page_title_block.html.twig' with { title: title } %}
    {% endif %}
{% endblock pageHeader %}

{% block content_data %}
    {% import '@OroUI/macros.html.twig' as UI %}

    {% set id = 'role-profile' %}

    {% set dataBlocks = [{
        'title': 'General'|trans,
        'subblocks': [
            {
                'title': '',
                'data': [
                    form_widget(form.appendUsers, {'id': 'roleAppendUsers'}),
                    form_widget(form.removeUsers, {'id': 'roleRemoveUsers'}),
                    form_row(form.label)
                ]
            }
        ]
    }] %}

    {% set dataBlocks = dataBlocks|merge(oro_form_additional_data(form, 'Additional'|trans)) %}

    {% set rolePermissionsGrid %}
        {% set entityTabPanelId = 'entity-tab-panel-'|uniqid %}
        {% set tabsOptions = tabsOptions|merge({
            controlTabPanel: entityTabPanelId
        }) %}

        <div {{ UI.renderPageComponentAttributes({
            module: 'orouser/js/components/role/entity-category-tabs-component',
            options: tabsOptions
        }) }}></div>
        <div id="{{ entityTabPanelId }}" class="tab-content" role="tabpanel">
            {{ dataGrid.renderGrid('role-permission-grid', {role: entity}, { cssClass: 'inner-permissions-grid', themeOptions: {readonly: false} }) }}
            <div {{ UI.renderPageComponentAttributes({
                module: 'orouser/js/components/role/capability-set-component',
                options: capabilitySetOptions
            }) }}></div>
        </div>
    {% endset %}

    {% set dataBlocks = dataBlocks|merge([{
        'title': privilegesConfig['entity'].label|trans,
        'subblocks': [
            {
                'title': '',
                'useSpan': false,
                'data': [
                    rolePermissionsGrid
                ]
            }
        ]
    }]) %}

    {% set dataBlocks = dataBlocks|merge([{
        'title' : 'oro.user.entity_plural_label'|trans,
        'subblocks': [
            {
                'title' : null,
                'useSpan': false,
                'data' : [dataGrid.renderGrid(gridName, {role_id: entityId}, { cssClass: 'inner-grid' })]
            }
        ]
    }]) %}

    {% set data = {
        'formErrors': form_errors(form)? form_errors(form) : null,
        'dataBlocks': dataBlocks,
    } %}
    {{ parent() }}
{% endblock content_data %}