{#
    Displays title and search form
#}
{% macro renderTitleAndButtons(pageTitle, buttons) %}
    <div class="container-fluid page-title">
        <div class="navigation navbar-extra navbar-extra-right">
            <div class="row">
                <div class="pull-left pull-left-extra">
                    <div class="page-title__path">
                        <div class="top-row">
                            <div class="page-title__entity-title-wrapper">
                                {% if pageTitle is iterable %}
                                    {% for title in pageTitle%}
                                        {% if not loop.last %}
                                        <div class="sub-title">
                                            {{ title }}
                                        </div>
                                        <span class="separator">/</span>
                                        {% else %}
                                        <h1 class="page-title__entity-title">{{ title|raw }}</h1>
                                        {% endif %}
                                    {% endfor %}
                                {% else %}
                                    <h1 class="page-title__entity-title">
                                        {{ pageTitle }}
                                    </h1>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pull-right title-buttons-container">
                    {% if buttons is defined %}
                        {% for button in buttons %}
                            {{ button }}
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{#
    Render page scrollable data
    params:
        configTree       - tree of current configuration
        form             - form view of active group
        activeTabName    - active tab name
        activeSubTabName - active subtab name
        routeName        - route name for tabs switch
        routeParameters  - additional route parameters
#}
{% macro renderScrollData(configTree, form, activeTabName = false, activeSubTabName = false, routeName = 'oro_config_configuration_system', routeParameters = {}) %}
    {% import _self as configMacros %}

    {{ configMacros.renderConfigurationScrollData({
        configTree: configTree,
        form: form,
        content: {},
        activeTabName: activeTabName,
        activeSubTabName: activeSubTabName,
        routeName: routeName,
        routeParameters: routeParameters
    }) }}
{% endmacro %}

{% macro renderConfigurationScrollData(data) %}
    {% import '@OroUI/macros.html.twig' as UI %}
    {% import _self as configMacros %}

    {% set content %}
        <div class="layout-content" data-page-component-view="{{ {
            view: 'oroui/js/app/views/highlight-text-view',
            highlightSwitcherContainer: 'div.system-configuration-content-header',
            highlightStateStorageKey: 'show-all-configuration-items-on-search',
            highlightSelectors: [
                'div.system-configuration-content-title',
                'h5.user-fieldset span',
                'div.control-label label',
                'i.tooltip-icon',
                'div.controls > div.control-subgroup *[data-name="field__value"]',
                '.select2-offscreen[data-name]'
            ],
            toggleSelectors: {
                'div.control-group': 'div.control-group-wrapper',
                'fieldset.form-horizontal': 'div.system-configuration-content-inner'
            },
            viewGroup: 'configuration'
        }|json_encode }}">
            {{ configMacros.renderTabContent(data.form, data.content) }}
        </div>
    {% endset %}
    <div class="system-configuration-container">
        {% embed "@OroUI/content_sidebar.html.twig" with {options: {
            scrollbar: '[data-role="jstree-container"]'
        }} %}
            {% block header %}
                <div id="system-configuration-jstree-inline-actions"></div>
            {% endblock header %}
            {% block sidebar %}
                {% import '@OroUI/macros.html.twig' as UI %}
                {{ UI.renderJsTree({
                    'label': null,
                    'treeOptions': {
                        'data' : data.configTree,
                        'viewGroup': 'configuration',
                        'nodeId': data.activeSubTabName,
                        'onSelectRoute': data.routeName,
                        'onSelectRouteParameters': data.routeParameters,
                        'view': 'oroconfig/js/app/views/configuration-tree-view'
                    },
                    'actionsOptions': {
                        inlineActionsCount: 2,
                        inlineActionsElement: '#system-configuration-jstree-inline-actions'
                    }
                }) }}
            {% endblock sidebar %}

            {% block content %}
                {% autoescape %}
                    {{ content }}
                {% endautoescape %}
            {% endblock content %}
        {% endembed %}
    </div>
{% endmacro %}

{#
    Renders tab form
    params:
        form        - form view for active tab tree configuration
#}
{% macro renderTabContent(form, content) %}
    {% import _self as configMacros %}

    {% set content = content|default({}) %}
    {% set processForm = false %}
    {% if content.formErrors is not defined %}
        {% set content = content|merge({
            formErrors: form_errors(form)
        }) %}
    {% endif %}
    {% if content.dataBlocks is not defined %}
        {% set content = content|merge({
            dataBlocks: form_data_blocks(form)
        }) %}
        {% set processForm = true %}
    {% endif %}
    {% if content.hiddenData is not defined %}
        {% set content = content|merge({
            hiddenData: form_rest(form)
        }) %}
    {% endif %}
    {% if processForm %}
        {% set content = oro_form_process(content, form) %}
    {% endif %}

    <div class="placeholder">
        <div class="scrollable-container">
            <div class="system-configuration-content content form-container" id="configuration-options-block">
                <div class="pull-right">
                    <input type="hidden" name="input_action" value="" data-form-id="{{ form.vars.id }}">
                </div>
                {% if content.formErrors is defined and content.formErrors | length %}
                    <div class="customer-info-actions container-fluid well-small alert-wrap" role="alert">
                        <div class="alert alert-error alert-dismissible">
                            <button class="close" type="button" data-dismiss="alert" aria-label="{{ 'Close'|trans }}" data-target=".alert-wrap"><span aria-hidden="true">&times;</span></button>
                            {{ content.formErrors|raw }}
                        </div>
                    </div>
                {% endif %}

                {% for scrollBlock in content.dataBlocks %}
                <div class="system-configuration-content-wrapper">
                    <div class="system-configuration-content-header">
                        <div class="system-configuration-content-title">
                            {{ scrollBlock.title|trans }}
                        </div>
                    </div>
                    <div class="system-configuration-content-inner">
                        {% if scrollBlock.description is defined and scrollBlock.description != '' %}
                            <p>{{ scrollBlock.description|trans }}</p>
                        {% endif %}

                        {% for subblock in scrollBlock.subblocks %}
                            {% if subblock is iterable %}
                                {{ configMacros.renderFieldset(subblock) }}
                            {% else %}
                                {{ subblock|raw }}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
                <div class="hide">
                    {{ content.hiddenData|raw }}
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{#
    Renders fieldset
    params:
        block.title       - fieldset label
        block.description - fieldset description (optional)
        block.data        - fields data
        block.tooltip     - fieldset tooltip (optional)
#}
{% macro renderFieldset(block) %}
    {% import '@OroUI/macros.html.twig' as ui %}
    {% if block.data|filter(v => v != "")|length > 0 %}
    <fieldset class="form-horizontal form-horizontal-large">
        {% if block.title is defined %}
        <h5 class="user-fieldset">
            <span>{{ block.title|trans }}</span>
            {% if block.tooltip is defined and block.tooltip != '' %}
                <label class="control-label header-tooltips">{{ ui.tooltip(block.tooltip, {}, 'right') }}</label>
            {% endif %}
        </h5>
        {% endif %}

        {% if block.description is defined and block.description != '' %}
            <div class="container-fluid">
                {% if block.descriptionStyle is defined and block.descriptionStyle != '' %}
                    <p class="{{ block.descriptionStyle }}">{{ block.description|trans|oro_html_sanitize }}</p>
                {% else %}
                    <p>{{ block.description|trans|oro_html_sanitize }}</p>
                {% endif %}
            </div>
        {% endif %}

        <div class="control-group-wrapper">
            {% for dataBlock in block.data %}
                {{ dataBlock|raw }}
            {% endfor %}
        </div>
    </fieldset>
    {% endif %}
{% endmacro %}