{% block wysiwyg_row %}
    {{ form_widget(form) }}
    {{ form_errors(form) }}
{% endblock %}

{% block oro_cms_page_variant_widget %}
    {{ form_row(form.cmsPage) }}
{% endblock %}

{% block text_content_variant_collection_widget %}
    {% import '@OroUI/macros.html.twig' as UI %}
    {% import _self as formfields %}
    {% set variantCollectionId = 'content-variant-collection-'|uniqid %}
    {% set variantCollectionItemParams = {variantCollectionId: variantCollectionId} %}

    {% apply spaceless %}
        {% set attr = attr|merge({'class': (attr.class is defined ? attr.class ~ ' ' : '') ~ 'oro-content-variant-collection' }) %}
        <div {{ block('widget_container_attributes') }}
                data-role="content-variant-collection"
                data-page-component-module="orocms/js/app/components/content-variant-collection-component"
                data-page-component-options="{{ {
                    'autoShowFirstItem': true
                }|json_encode }}"
                data-last-index="{{ form.children|length}}"
                data-prototype-name="{{ prototype_name }}"
                {{ formfields.oro_cms_content_variant_attributes(form, variantCollectionItemParams) }}
        >
            <input type="hidden" name="validate_{{ full_name }}" data-collection-name="{{ full_name }}" data-name="collection-validation" disabled data-validate-element>

            <div class="content-variant-add-btn-container clearfix-oro">
                <div class="btn-group pull-right">
                    {{ UI.button({
                        'path': '#',
                        'label': 'oro.cms.contentblock.form.add_variant.label'|trans,
                        'data': {
                            'role': 'variant-button'
                        }
                    }) }}
                </div>
            </div>

            <div class="variant-collection" data-role="collection-container"
                 id="{{ variantCollectionId }}"
                 data-page-component-module="oroui/js/app/components/view-component"
                 data-page-component-options="{{ {
                     view: 'orocms/js/app/views/default-variant-collection-view',
                     defaultSelector: '[name$="[default]"]'
                 }|json_encode }}"
            >
                {% if form.children|length %}
                    {% for child in form.children %}
                        {{ formfields.oro_cms_content_variant_collection_item(child, child.vars.full_name, form.vars.disabled, false, variantCollectionItemParams) }}
                    {% endfor %}
                {% endif %}
            </div>
        </div>

        <div {{ UI.renderPageComponentAttributes({
            module: 'oroui/js/app/components/view-component',
            options: {
                _sourceElement: '#' ~ _context.id,
                view: 'orocms/js/app/views/variants-collection-view'
            }
        }) }}></div>
    {% endapply %}
{% endblock %}

{% block text_content_variant_widget %}
    {{ form_widget(form.content) }}
    {{ form_errors(form.content) }}
    {{ form_widget(form.content_style) }}
    {{ form_errors(form.content_style) }}
    {{ form_widget(form.content_properties) }}
    {{ form_errors(form.content_properties) }}
{% endblock %}

{% block wysiwyg_value_widget %}
    <div class="editor-without-offset">
    {% for child in form.children %}
        {{ form_widget(child) }}
        {{ form_errors(child) }}
    {% endfor %}
    </div>
{% endblock %}

{% block image_slide_collection_row %}
        {% import _self as formFields %}
        {% apply spaceless %}
            {% if prototype is defined %}
                {% set prototype_html = formFields.image_slide_collection_item_prototype(form) %}
            {% endif %}
            {% set attr = attr|merge({'class': (attr.class is defined ? attr.class ~ ' ' : '') ~ 'oro-image-slide-collection oro-options-collection oro-item-collection collection-fields-list' }) %}
            {% set id = id ~ '_collection' %}
            <div class="row-oro">
                {% set prototype_name = form.vars.prototype_name %}
                <div {{ block('widget_container_attributes') }} data-last-index="{{ form.children|length}}" data-row-count-add="{{ form.vars.row_count_add }}"
                    data-prototype-name="{{ prototype_name }}"{% if prototype_html is defined %} data-prototype="{{ prototype_html|escape }}"{% endif %}
                >
                    <input type="hidden" name="validate_{{ full_name }}" data-collection-name="{{ full_name }}" data-name="collection-validation" disabled data-validate-element>
                    {% if form.children|length %}
                        {% for child in form.children %}
                            {{ formFields.image_slide_collection_item_prototype(child) }}
                        {% endfor %}
                    {% elseif show_form_when_empty and prototype_html is defined %}
                        {% for i in 0..(form.vars.row_count_initial - 1) %}
                            {{ prototype_html|replace({(prototype_name): i})|raw }}
                        {% endfor %}
                    {% endif %}
                </div>
                {% if allow_add %}
                    <a class="btn add-list-item" href="#" role="button">{{ form.vars.add_label|default('oro.form.collection.add')|trans }}</a>
                {% endif %}
            </div>
        {% endapply %}
{% endblock %}

{% macro image_slide_collection_item_prototype(widget) %}
    {% if 'collection' in widget.vars.block_prefixes %}
        {% set form = widget.vars.prototype %}
        {% set name = widget.vars.prototype.vars.name %}
        {% set allow_delete = widget.vars.allow_delete %}
    {% else %}
        {% set form = widget %}
        {% set name = widget.vars.full_name %}
        {% set allow_delete = widget.parent.vars.allow_delete %}
        {% if widget.vars.allow_delete is defined %}
            {% set allow_delete = allow_delete and widget.vars.allow_delete %}
        {% endif %}
    {% endif %}
    <div class="oro-collection-item"
         data-content="{{ name }}"
            {% if widget.parent.vars.skip_optional_validation_group is not defined %}
                data-validation-optional-group
                {% if form.vars.attr['data-validation-optional-group-handler'] is defined %}
                    data-validation-optional-group-handler="{{ form.vars.attr['data-validation-optional-group-handler'] }}"
                {% endif %}
            {% endif %}
    >
        <div class="row-oro oro-multiselect-holder{% if not allow_delete %} not-removable{% endif %}">
            {% set text_fiels_html %}
                {{ form_row(form.text) }}
            {% endset %}
                <div class="responsive-block">
                    {{ form_rest(form) }}
                </div>
                <div class="responsive-block">
                    {{ text_fiels_html }}
                </div>
            {% if allow_delete %}
                <button class="removeRow btn btn-icon btn-square-light"
                        aria-label="{{ 'oro.form.collection.remove'|trans }}"
                        type="button"
                        data-related="{{ name }}">
                </button>
            {% endif %}
        </div>
    </div>
{% endmacro %}

{% macro oro_cms_content_variant_collection_item(form, name, disabled, expanded, params = {}) %}
    {% set parentID = params.variantCollectionId|default('') %}
    {% apply spaceless %}
        {% set expanded = expanded|default(false) %}
        {% set scopes %}
            {{ form_widget(form.scopes) }}
        {% endset %}
        <div data-content="{{ name }}"
             data-validation-optional-group
             data-role="content-variant-item"
             class="content-variant-item {% if form.default.vars.data %}content-variant-item-default{% endif %}"
                {% if form.vars.attr['data-validation-optional-group-handler'] is defined %}
                    data-validation-optional-group-handler="{{ form.vars.attr['data-validation-optional-group-handler'] }}"
                {% endif %}
             data-page-component-module="oroui/js/app/components/view-component"
             data-page-component-options="{{ {
                 view: 'oroscope/js/app/views/scope-toggle-view',
                 selectors: {
                     useParentScopeSelector: '#' ~ form.default.vars.id,
                     scopesSelector: '.scope-elements'
                 }
             }|json_encode }}"
             data-layout="separate"
        >
            {% set collapseId = 'content-variant-collapse-'|uniqid ~ form.default.vars.id  %}
            <button class="btn-toggle-variant btn btn-icon btn-square-light{{ expanded ? '' : ' collapsed' }}"
                    type="button"
                    data-toggle="collapse"
                    data-target="{{ '#' ~ collapseId }}"
                    data-related="{{ name }}"
                    aria-expanded="{{ expanded }}"
                    title="{{ expanded ? 'Collapse'|trans : 'Expand'|trans }}"
            >
                <span class="fa-icon oro-collapse-icon" aria-hidden="true"></span>
            </button>

            <label class="h5 content-variant-item-title">
                {{ form_widget(form.default) }}
                <span class="label label-info content-variant-item-default-label">{{ "oro.cms.contentblock.content_variants.default.label"|trans }}</span>
                <span class="label content-variant-item-make-default-label">{{ "oro.cms.contentblock.content_variants.make_default.label"|trans }}</span>
            </label>

            <div id="{{ collapseId }}"
                 class="content-variant-item-content collapse{{ expanded ? ' show' : '' }}"
                 data-collapsed-title="{{ 'Expand'|trans }}"
                 data-expanded-title="{{ 'Collapse'|trans }}"
                 data-parent="#{{ parentID }}"
            >
                <div class="content-variant-item-content__body">
                    {{ form_widget(form, {disabled: disabled}) }}

                    <div class="scope-elements">
                        <h5>{{ form.scopes.vars.label|trans }}</h5>
                        {{ scopes }}
                    </div>
                </div>
            </div>

            <button class="btn-remove-variant btn btn-icon btn-square-light" type="button" data-related="{{ name }}" data-action="remove" aria-label="{{ 'Remove row'|trans }}"><span class="fa-trash-o" aria-hidden="true"></span></button>
        </div>
    {% endapply %}
{% endmacro %}

{% macro oro_cms_content_variant_attributes(form, variantCollectionItemParams = {}) %}
    {% import _self as formfields %}
    {% set prototype = formfields.oro_cms_content_variant_collection_item(
        form.vars.prototype,
        form.vars.prototype.vars.name,
        form.vars.disabled,
        false,
        variantCollectionItemParams
    ) %}
    data-prototype="{{ prototype|escape }}"
{% endmacro %}

{% block oro_cms_tabbed_content_item_collection_row %}
    {% import _self as formFields %}
    {% apply spaceless %}
        {% if prototype is defined %}
            {% set prototype_html = formFields.oro_cms_tabbed_content_collection_item_prototype(form) %}
        {% endif %}
        {% set attr = attr|merge({
            'class': (attr.class is defined ? attr.class ~ ' ' : '') ~ 'oro-image-slide-collection oro-options-collection oro-item-collection collection-fields-list'
        }) %}

        {% set id = id ~ '_collection' %}

        <div class="row-oro">
            {% set prototype_name = form.vars.prototype_name %}
            <div
                    {{ block('widget_container_attributes') }}
                    data-last-index="{{ form.children|length}}"
                    data-row-count-add="{{ form.vars.row_count_add }}"
                    data-prototype-name="{{ prototype_name }}"
                    {% if prototype_html is defined %}data-prototype="{{ prototype_html|escape }}"{% endif %}
            >
                <input type="hidden" name="validate_{{ full_name }}" data-collection-name="{{ full_name }}" data-name="collection-validation" disabled data-validate-element>
                {% if form.children|length %}
                    {% for child in form.children %}
                        {{ formFields.oro_cms_tabbed_content_collection_item_prototype(child) }}
                    {% endfor %}
                {% elseif show_form_when_empty and prototype_html is defined %}
                    {% for i in 0..(form.vars.row_count_initial - 1) %}
                        {{ prototype_html|replace({(prototype_name): i})|raw }}
                    {% endfor %}
                {% endif %}
            </div>
            {% if allow_add %}
                <a class="btn add-list-item" href="#" role="button">{{ form.vars.add_label|default('oro.form.collection.add')|trans }}</a>
            {% endif %}
        </div>
    {% endapply %}
{% endblock %}

{% macro oro_cms_tabbed_content_collection_item_prototype(widget) %}
    {% if 'collection' in widget.vars.block_prefixes %}
        {% set form = widget.vars.prototype %}
        {% set name = widget.vars.prototype.vars.name %}
        {% set allow_delete = widget.vars.allow_delete %}
    {% else %}
        {% set form = widget %}
        {% set name = widget.vars.full_name %}
        {% set allow_delete = widget.parent.vars.allow_delete %}
        {% if widget.vars.allow_delete is defined %}
            {% set allow_delete = allow_delete and widget.vars.allow_delete %}
        {% endif %}
    {% endif %}
    <div
            class="oro-collection-item"
            data-content="{{ name }}"
            {% if widget.parent.vars.skip_optional_validation_group is not defined %}
                data-validation-optional-group
                {% if form.vars.attr['data-validation-optional-group-handler'] is defined %}
                    data-validation-optional-group-handler="{{ form.vars.attr['data-validation-optional-group-handler'] }}"
                {% endif %}
            {% endif %}
    >
        <div class="row-oro oro-multiselect-holder{% if not allow_delete %} not-removable{% endif %}">
            {% set text_fiels_html %}
                {{ form_row(form.content) }}
            {% endset %}

            <div class="section-content">
                {{ form_rest(form) }}
            </div>
            <div class="section-content">
                {{ text_fiels_html }}
            </div>

            {% if allow_delete %}
                <button
                        class="removeRow btn btn-icon btn-square-light"
                        aria-label="{{ 'oro.form.collection.remove'|trans }}"
                        type="button"
                        data-related="{{ name }}">
                </button>
            {% endif %}
        </div>
    </div>
{% endmacro %}