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

{% form_theme form with '@OroForm/Form/fields.html.twig' %}

{% set formAction = entity.id ? path('oro_customer_customer_user_role_update', {id: entity.id}) : path('oro_customer_customer_user_role_create') %}

{% oro_title_set({params : {"%label%": entity.label|default('N/A'|trans), '%entityName%': 'oro.customer.customeruserrole.entity_label'|trans} }) %}

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

    {% set fields = [] %}
    {% for name, child in form %}
        {% if name not in ['appendUsers', 'removeUsers', 'entity', 'privileges', 'action'] %}
            {% 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,
        customerSelector: '#' ~ form.customer.vars.id,
        privilegesSelector: '#' ~ form.privileges.vars.id,
        appendUsersSelector: '#roleAppendUsers',
        removeUsersSelector: '#roleRemoveUsers',
        fields: fields
    } %}
    <div data-page-component-module="orocustomer/js/app/views/customer-role-view"
         data-page-component-options="{{ options|json_encode }}">
    </div>

    {{ parent() }}

    {{ UI.cancelButton(path('oro_customer_customer_user_role_index')) }}
    {% set html = UI.saveAndCloseButton({
        'class': 'btn-success role-submit',
        'route': 'oro_customer_customer_user_role_view',
        'params': {'id': '$id'}
    }) %}
    {% if entity.id or is_granted('oro_customer_customer_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_customer_customer_user_role_update',
            'params': {'id': '$id'}
        }) %}
    {% endif %}
    {{ UI.dropdownSaveButton({'html': html}) }}
{% endblock %}

{% block pageHeader %}
    {% if entity.id %}
        {% set breadcrumbs = {
            'entity':      entity,
            'indexPath':   path('oro_customer_customer_user_role_index'),
            'indexLabel': 'oro.customer.customeruserrole.entity_plural_label'|trans,
            'entityTitle': entity.label|default('N/A'|trans)
        } %}
        {{ parent() }}
    {% else %}
        {% set title = 'oro.ui.create_entity'|trans({'%entityName%': 'oro.customer.customeruserrole.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 = 'customer-user-role-edit' %}

    {% set customerSelectorComponentOptions = {
        customerFieldId: '#' ~ form.customer.vars.id,
        datagridName: 'customer-customer-users-grid-update',
        enableConfirmation: entity.id,
        originalValue: form.customer.vars.value
    } %}

    {% set customerSelector %}
        <div class="control-group"
             data-page-component-module="orocustomer/js/app/components/customer-user-role-component"
             data-page-component-options="{{ customerSelectorComponentOptions|json_encode }}">
            {{ form_row(form.customer) }}
        </div>
    {% endset %}

    {% set fields = [
            form_row(form.label),
            customerSelector,
        ]
    %}

    {% if entity.public %}
        {% set fields = fields|merge([form_row(form.selfManaged)]) %}
    {% endif %}

    {% set dataBlocks = [
        {
            'title': 'oro.customer.sections.general'|trans,
            'subblocks': [
                {
                    'data': fields
                }
            ]
        }
    ] %}

    {% 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('customer-user-role-permission-grid', {role: entity}, { cssClass: 'inner-permissions-grid' }) }}
            <div {{ UI.renderPageComponentAttributes({
                module: 'orouser/js/components/role/capability-set-component',
                options: capabilitySetOptions
            }) }}></div>
        </div>
    {% endset %}

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

    {% set dataBlocks = dataBlocks|merge([{
        'title' : 'oro.customer.customeruser.entity_plural_label'|trans,
        'subblocks': [{
            'title' : null,
            'useSpan': false,
            'data' : [
                form_widget(form.appendUsers, {'id': 'roleAppendUsers'}),
                form_widget(form.removeUsers, {'id': 'roleRemoveUsers'}),
                dataGrid.renderGrid('customer-customer-users-grid-update', {role: entity.id, customer: entity.customer.id|default(null)}, { cssClass: 'inner-grid' })
            ]
        }]
    }] ) %}

    {% set dataBlocks = dataBlocks|merge(oro_form_additional_data(form, 'oro.customer.sections.additional'|trans)) %}

    {% set data = {
        'formErrors': form_errors(form),
        'dataBlocks': dataBlocks
    }%}

    <div class="responsive-form-inner">
        {{ parent() }}
    </div>
{% endblock content_data %}