{#
    Displays title and search form
#}
{% macro renderTitleAndButtons(pageTitle, buttons) %}
    <div class="container-fluid configuration-header clearfix">
    {% if pageTitle is iterable %}
        <div class="customer-info customer-simple pull-left">
        {% for title in pageTitle%}
            {% if not loop.last %}
            <div class="sub-title">
                {{ title }}
            </div>
            <span class="separator">/</span>
            {% else %}
            <h1 class="user-name">{{ title|raw }}</h1>
            {% endif %}
        {% endfor %}
        </div>
    {% else %}
        <h1>
            {{ pageTitle }}
        </h1>
    {% endif %}
        <div class="pull-right">
            {% if buttons is defined %}
                {% for button in buttons %}
                    {{ button }}
                {% endfor %}
            {% endif %}
        </div>
    </div>
{% endmacro %}

{#
    Render page scrollable data
    params:
        data             - 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(data, form, activeTabName = false, activeSubTabName = false, routeName = 'oro_config_configuration_system', routeParameters = {}) %}
    {% import 'OroUIBundle::macros.html.twig' as UI %}
    <div class="system-configuration-container left-panel-container">
        <div class="placeholder">
            <div class="scrollable-container">
                {% if activeSubTabName and form != false %}
                    {{ _self.renderTabs(data, activeTabName, activeSubTabName, routeName, routeParameters) }}
                    {{ _self.renderTabContent(form) }}
                {% endif %}
            </div>
        </div>
    </div>
{% endmacro %}

{#
    Renders tab navigation item
    params:
        data.isActive    - Tab is active
        data.name        - Tab name
        data.title       - Tab title
        data.icon        - Tab icon
        data.url         - Tab view url
#}
{% macro renderTabNavItem(data) %}
    <li {% if data.isActive %}class="active"{% endif %}>
        <a href="{% if data.isActive %}javascript:void(0);{% else %}{{ data.url }}{% endif %}">
            {% if data.icon is defined and data.icon != '' %}<i class="icon fa {{ data.icon }}"></i>{% endif %}
            {{ data.title|trans }}
        </a>
    </li>
{% endmacro %}

{#
    Renders submenu
    params:
        data              - tree of current configuration
        activeTabName     - Active tab name
        activeSubTabName  - Active subtab name
        routeName        - route name for tabs switch
        routeParameters  - additional route parameters
#}
{% macro renderTabs(data, activeTabName = false, activeSubTabName = false, routeName = 'oro_config_configuration_system', routeParameters = {}) %}
    <div class="left-panel">
        <div class="system-configuration-search">
            {#div class="clearfix">
                <div class="input-append">
                    <input type="text" autocomplete="off" value="" name="search" placeholder="Search" class="search">
                    <button class="btn btn-search" type="submit"><i class="icon-search"></i></button>
                </div>
            </div>#}
            <div class="clearfix">
                {{ _self.renderCollapseExpandActions('#sidebar-menu-tree') }}
            </div>
        </div>
        {% if data is iterable %}
        <ul class="system-configuration-accordion accordion" id="sidebar-menu-tree">
            {% for tab in data %}
            {% set tabData = {
                isActive: activeTabName and activeTabName == tab.name,
                name: tab.name,
                url: path(routeName, {activeGroup: tab.name}|merge(routeParameters))
                }|merge(tab.toViewData)
            %}
            <li class="accordion-group">
                <div class="accordion-heading">
                    <a href="#config_tab_{{ tabData.name }}" data-toggle="collapse"
                       class="accordion-toggle{% if not tabData.isActive %} collapsed{% endif %}">
                        {%- if tabData.icon is defined and tabData.icon != '' %}<i class="icon fa {{ tabData.icon }}"></i>{% endif -%}
                        {{- tabData.title|trans -}}
                    </a>
                </div>
                <div id="config_tab_{{ tabData.name }}" class="accordion-body collapse{% if tabData.isActive %} in{% endif %}">
                    <div class="accordion-inner"><ul>
                    {% for group in tab %}
                        {% set activeSubTab = null %}
                        {% for subTab in group %}
                            {% if tabData.isActive and activeSubTabName and activeSubTabName == subTab.name %}
                                {% set activeSubTab = subTab %}
                            {% endif %}
                        {% endfor %}
                        {% set groupData = {
                            isActive: activeSubTab is not null,
                            name: group.name
                            }|merge(group.toViewData)
                        %}
                        <li class="accordion-group">
                            <div class="accordion-heading">
                                <a href="#config_tab_group_{{ groupData.name }}" data-toggle="collapse"
                                   class="accordion-toggle{% if not groupData.isActive %} collapsed{% endif %}">
                                    {{- groupData.title|trans -}}
                                </a>
                            </div>
                            <div id="config_tab_group_{{ groupData.name }}"
                                 class="accordion-body collapse collapse-inner{% if groupData.isActive %} in{% endif %}">
                                <div class="accordion-inner"><ul>
                                {% for subTab in group %}
                                    {% set subTabData = {
                                        isActive: activeSubTab == subTab,
                                        name: subTab.name,
                                        url: path(routeName, {activeGroup: tab.name, activeSubGroup: subTab.name}|merge(routeParameters))
                                        }|merge(subTab.toViewData)
                                    %}
                                    {{ _self.renderTabNavItem(subTabData) }}
                                {% endfor %}
                                </ul></div>
                            </div>
                        </li>
                    {% endfor %}
                    </ul></div>
                </div>
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </div>
{% endmacro %}

{#
    Renders tab form
    params:
        form        - form view for active tab tree configuration
#}
{% macro renderTabContent(form) %}
    {% set data = {
        'formErrors': form_errors(form),
        'dataBlocks': form_data_blocks(form),
        'hiddenData': form_rest(form)
    } %}

    {% set data = oro_form_process(data, form) %}

    <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 data.formErrors is defined and data.formErrors | length %}
            <div class="customer-info-actions container-fluid well-small alert-wrap">
                <div class="alert alert-error">
                    <button class="close" type="button" data-dismiss="alert" data-target=".alert-wrap">×</button>
                    {{ data.formErrors|raw }}
                </div>
            </div>
        {% endif %}

        {% for scrollBlock in data.dataBlocks %}
        {% set accordionId = 'system-configuration-collapse' ~ loop.index %}
        <div class="accordion">
            <div class="accordion-group">
                <div class="accordion-heading">
                    {% if loop.first %}
                    <div class="pull-right">
                        {{ _self.renderCollapseExpandActions('#configuration-options-block') }}
                    </div>
                    {% endif %}
                    <a href="#{{ accordionId }}" data-toggle="collapse" class="accordion-toggle">
                        {{ scrollBlock.title|trans }}
                    </a>
                </div>
                <div class="accordion-body in collapse" id="{{ accordionId }}" >
                    <div class="accordion-inner">
                        {% if scrollBlock.description is defined and scrollBlock.description != '' %}
                            <p>{{ scrollBlock.description|trans }}</p>
                        {% endif %}

                        {% for subblock in scrollBlock.subblocks %}
                            {{ _self.renderFieldset(subblock) }}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        <div class="hide">
            {{ data.hiddenData|raw }}
        </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 'OroUIBundle::macros.html.twig' as ui %}
    <fieldset class="form-horizontal form-horizontal-large">
        <h5 class="user-fieldset">
            <span>{{ block.title|trans }}
                {% if block.tooltip is defined and block.tooltip != '' %}
                    <label class="control-label header-tooltips">{{ ui.tooltip(block.tooltip, {}, 'right') }}</label>
                {% endif %}
            </span>
        </h5>

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

        {% for dataBlock in block.data %}
            {{ dataBlock|raw }}
        {% endfor %}
    </fieldset>
{% endmacro %}

{#
    Renders 'Expand All' and 'Collapse All' links
    params:
        target - CSS selector for accordions container
#}
{% macro renderCollapseExpandActions(target) %}
    <ul class="inline small-text">
        <li><a href="{{ target }}" data-action="accordion:expand-all">{{ 'oro.config.actions.expand_all'|trans }}</a></li>
        <li class="separator">|</li>
        <li><a href="{{ target }}" data-action="accordion:collapse-all">{{ 'oro.config.actions.collapse_all'|trans }}</a></li>
    </ul>
{% endmacro %}