{$_lang = substr($wa->locale(), 0, 2)}
{$_sprite_url = "`$wa_url`wa-apps/shop/img/backend/products/product/icons.svg?v=`$wa->version()`"}

{$_tooltips = [
    "error-category-name" => [
        "id" => "error-category-name",
        "html" => _w("This field may contain a maximum of %d character.", "This field may contain a maximum of %d characters.", 255)
    ],
    "category-name" => [
        "id" => "category-name",
        "html" => _w("Category name that customers will see in the website menu and in the category page title.")
    ],
    "category-url" => [
        "id" => "category-url",
        "html" => _w("Editable part of the category page address.")
    ],
    "category-url-copy" => [
        "id" => "category-url-copy",
        "html" => _w("Copy category page address")
    ],
    "category-url-refresh" => [
        "id" => "category-url-refresh",
        "html" => _w("Generate a search-engine friendly URL from the category name")
    ],
    "category-url-params" => [
        "id" => "category-url-params",
        "html" => _w("This setting affects only the way a link is displayed in the website menu and not how the category page is published in the storefront. Its value can be used by plugins to determine products publication parameters on third-party resources.")
    ],
    "category-params" => [
        "id" => "category-params",
        "html" => _w("All products matching the selected criteria will be collected in this category.")|cat: ' '|cat:sprintf_wp('You can select products by properties “%s” and by any custom features set up in the store settings.', implode(_w('”, “'), [_w('Date added'), _w('Last change date'), _w('Product type'), _w('Tag'), _w('Rating'), _w('Price'), _w('Compare at price'), _w('Purchase price'), _w('In stock'), _w('Badge')]))
    ],
    "category-publication" => [
        "id" => "category-publication",
        "html" => _w("Select the storefronts on which the category page will be available. On other storefronts, the “Page not found” (404) error message will be displayed.")
    ]
]}

{$_locales = [
    "error_category_name_empty" => _w("Enter the category name"),
    "error_category_name" => "{_w("Invalid value")} <span class=\"s-icon\" data-tooltip-id=\"error-category-name\"><i class=\"fas fa-question-circle\"></i></span>",
    "incorrect_url" => _w("Incorrect URL format."),
    "show_visible_storefronts_forms" => [
        _w("Show %d storefront on which the category is available", "Show %d storefronts on which the category is available", 1, false),
        _w("Show %d storefront on which the category is available", "Show %d storefronts on which the category is available", 2, false),
        _w("Show %d storefront on which the category is available", "Show %d storefronts on which the category is available", 5, false)
    ],
    "letter_forms" => [
        _w("%d character.", "%d characters.", 1, false),
        _w("%d character.", "%d characters.", 2, false),
        _w("%d character.", "%d characters.", 5, false)
    ],
    "no_results" => _w("Nothing found"),
    "added" => _w("Added")
]}

{$_templates = []}

{capture assign="_template_category_filter_autocomplete_item"}
    <li class="ui-menu-item-html">
        <div>
            %added%
            <span class="s-icon icon size-12 shift-inherit"><svg><use xlink:href='{$_sprite_url}#sitemap'></use></svg></span>
            <span class="s-name">%name%</span>
            <span class="s-code hint">%code%</span>
        </div>
    </li>
{/capture}
{$_templates["component-category-filter-autocomplete-item"] = $_template_category_filter_autocomplete_item|strip}

{capture assign="_template_category_filter_autocomplete_item_sku"}
    <li class="ui-menu-item-html">
        <div>
            %added%
            <span class="s-icon icon size-12 shift-inherit text-light-gray"><svg><use xlink:href='{$_sprite_url}#sitemap-slash'></use></svg></span>
            <span class="s-name">%name%</span>
            <span class="s-code hint">%code%</span>
        </div>
    </li>
{/capture}
{$_templates["component-category-filter-autocomplete-item-sku"] = $_template_category_filter_autocomplete_item_sku|strip}

{include file="../../dialogs/modification_wysiwyg.confirm.html" inline}

{capture assign="_dialog_load"}
    <div class="wa-dialog s-category-feature-edit-dialog" id="js-category-feature-edit-dialog">
        <div class="dialog-background"></div>
        <div class="dialog-body">
            <div class="dialog-header">
                <div class="flexbox space-12">
                    <div class="s-title-wrapper wide">
                        <h3 class="s-title">&nbsp;</h3>
                    </div>
                </div>
            </div>
            <div class="dialog-content align-center">
                <span class="s-icon icon size-32"><i class="fas fa-spinner fa-spin"></i></span>
            </div>
            <div class="dialog-footer">&nbsp;</div>
        </div>
    </div>
{/capture}
{$_templates["dialog-load"] = $_dialog_load|strip}

{$_components = []}

{capture assign="_component_category_visible_storefronts"}
    <div class="s-storefronts-section">
        <div class="s-storefronts-toggle hover-blue" v-on:click="toggle">
            <span class="s-text" v-if="!states.expanded" v-html="selected_storefronts_string"></span>
            <span class="s-text" v-else>[`Hide storefront list`]</span>
        </div>
        <div class="s-storefronts-list break-words" v-if="states.expanded">
            <template v-for="storefront in selected_storefronts">
                <div class="s-storefront-wrapper">
                    <a class="hover-blue" v-bind:href="storefront.url" v-text="storefront.name" target="_blank"></a>
                </div>
            </template>
            <div class="s-storefronts-toggle hover-blue" v-on:click="toggle(false)">
                <span class="s-text">[`Hide storefronts`]</span>
            </div>
        </div>
    </div>
{/capture}
{$_components["component-category-visible-storefronts"] = $_component_category_visible_storefronts|strip}

{capture assign="_component_category_filter_section"}
    <div class="s-category-filter-section">
        <div class="s-search-section">
            <div class="s-field-wrapper">
                <input class="js-autocomplete small width-90" type="text" placeholder="{_w("Start typing a filter parameter name")|escape}">
                <div class="s-loading-wrapper" v-if="states.is_loading">
                    <span class="icon top text-light-gray"><i class="fas fa-spinner fa-spin"></i></span>
                </div>
            </div>
            <div class="s-description hint flexbox space-8">
                <div class="s-icon">
                    <span class="icon"><i class="fas fa-info-circle"></i></span>
                </div>
                <div class="s-text">[`If you have not found a certain feature, enter a more detailed search query to see more exact results.`]</div>
            </div>
        </div>
        <div class="s-filter-list">
            <template v-for="filter_id in category.explode_feature_ids">
                <component-category-filter-item
                    v-bind:filter="category.allow_filter_data[filter_id]"></component-category-filter-item>
            </template>
        </div>
    </div>
{/capture}
{$_components["component-category-filter-section"] = $_component_category_filter_section|strip}

{capture assign="_component_category_filter_item"}
    <div class="s-filter-wrapper flexbox"
         v-bind:key="filter.id"
         v-bind:data-id="filter.id"
         v-bind:class="item_class">
        <div class="s-column-toggle">
            <div class="s-toggle-wrapper cursor-move js-filter-move-toggle" draggable="true">
                <span class="s-icon icon shift-0"><svg><use xlink:href='{$_sprite_url}#grip'></use></svg></span>
            </div>
        </div>
        <div class="s-column-name wide">
            <template v-if="filter.code.length">
                <span class="s-icon icon size-12 shift-inherit" v-if="filter.available_for_sku"><svg><use xlink:href='{$_sprite_url}#sitemap'></use></svg></span>
                <span class="s-icon icon size-12 shift-inherit text-light-gray" v-else><svg><use xlink:href='{$_sprite_url}#sitemap-slash'></use></svg></span>
            </template>
            <span class="s-name">{ { filter.name } }</span>
            <span class="s-code hint" v-if="filter.code">{ { filter.code } }</span>
        </div>
        <div class="s-column-actions">
            <div class="s-action nowrap cursor-pointer hover-red" v-on:click="removeItem">
                <span class="s-icon icon shift-0"><i class="fas fa-times"></i></span>
                <span class="s-name">[`Remove`]</span>
            </div>
        </div>
    </div>
{/capture}
{$_components["component-category-filter-item"] = $_component_category_filter_item|strip}

{capture assign="_component_category_storefronts_section"}
    <div class="fields">
        <div class="field">
            <div class="name">
                <span class="s-name">[`Category visibility in storefronts`]</span>
                <span class="s-icon icon" data-tooltip-id="category-publication"><i class="fas fa-question-circle gray"></i></span>
            </div>
            <div class="value">

                <div class="s-options-section">
                    <div class="s-options-group">
                        <div class="s-radio-wrapper">
                            <label class="flexbox middle space-8">
                                <component-radio v-model="type"
                                                 v-bind:val="'all'"
                                                 class="js-do-not-submit"
                                                 v-bind:name="radio_name"></component-radio>
                                <span class="s-label">[`All storefronts`]</span>
                            </label>
                        </div>
                    </div>
                    <div class="s-options-group">
                        <div class="s-radio-wrapper">
                            <label class="flexbox middle space-8">
                                <component-radio v-model="type"
                                                 v-bind:val="'selection'"
                                                 class="js-do-not-submit"
                                                 v-bind:name="radio_name"></component-radio>
                                <span class="s-label">{_w("Selected storefronts")|escape} ({ { selected_storefronts.length } })</span>
                            </label>
                        </div>
                        <div class="s-options-list" v-if="type === 'selection'">
                            <div class="s-option">
                                <label class="flexbox middle space-8">
                                    <component-checkbox v-bind:label="false" v-bind:model-value="all_selected" v-on:change="selectAll"></component-checkbox>
                                    <span class="s-label">[`Select all`]</span>
                                </label>
                            </div>
                            <template v-for="storefront in storefronts">
                                <div class="s-option">
                                    <label class="flexbox middle space-8" v-bind:title="storefront.name">
                                        <component-checkbox v-bind:label="false" v-model="storefront.states.enabled"></component-checkbox>
                                        <span class="s-label">{ { storefront.name } }</span>
                                    </label>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>

                <div class="s-overwrite-wrapper" v-if="category.id && category_data.categories.length">
                    <label class="flexbox space-8">
                    <span class="s-checkbox">
                        <component-checkbox
                            v-bind:label="false"
                            v-model="root_states.update_storefronts_at_subcategories"></component-checkbox>
                    </span>
                        <span class="s-text">[`Apply the same storefronts visibility settings to subcategories.`]</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
{/capture}
{$_components["component-category-storefronts-section"] = $_component_category_storefronts_section|strip}

{capture assign="_component_category_description_redactor"}
    <div class="s-category-description-redactor">
        <section class="s-editor-section js-editor-section">
            <div class="s-section-header">
                {strip}
                    <div class="toggle tabs-mode js-editor-type-toggle">
                        <span data-id="wysiwyg">[`WYSIWYG`]</span>
                        <span data-id="html">[`HTML`]</span>
                    </div>
                {/strip}
            </div>

            <div class="s-section-body">
                <div class="s-wysiwyg-editor js-wysiwyg-editor">
                    <textarea class="js-product-description-textarea js-do-not-submit" v-bind:value="modelValue"></textarea>
                </div>
                <div class="s-html-editor js-html-editor"></div>
            </div>
        </section>
    </div>
{/capture}
{$_components["component-category-description-redactor"] = $_component_category_description_redactor|strip}

{capture assign="_component_category_features_section"}
    <div class="vue-component-category-features-section">
        <div class="field s-field-wrapper" >
            <div class="name">
                <span class="s-name">[`Products’ add-to-category parameters`]</span>
                <span class="s-icon icon" data-tooltip-id="category-params"><i class="fas fa-question-circle gray"></i></span>
            </div>
            <div class="value">
                <div class="s-category-features-section">
                    <div class="s-search-section">
                        <div class="s-field-wrapper">
                            <input class="s-field js-autocomplete small" type="text" placeholder="{_w("Start typing a parameter name")|escape}">
                            <div class="s-loading-wrapper" v-if="states.is_loading">
                                <span class="icon top text-light-gray"><i class="fas fa-spinner fa-spin"></i></span>
                            </div>
                        </div>
                        <div class="s-description hint flexbox space-8">
                            <div class="s-icon">
                                <span class="icon"><i class="fas fa-info-circle"></i></span>
                            </div>
                            <div class="s-text">[`If you have not found a certain feature, enter a more detailed search query to see more exact results.`]</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="field s-field-wrapper" v-if="category.conditions.length">
            <div class="value">
                <div class="s-category-features-section">
                    <div class="s-features-list">
                        <template v-for="(item, index) in category.conditions">
                            <component-category-feature-item
                                v-bind:index="index"
                                v-bind:item="item"
                                v-on:remove="removeItem"></component-category-feature-item>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/capture}
{$_components["component-category-features-section"] = $_component_category_features_section|strip}

{capture assign="_component_category_feature_item"}
    <div class="s-feature-wrapper" v-bind:class="item_class">
        <div class="tablebox space-12">
            <div class="s-column-index">
                <span class="s-index">{ { index + 1 } }.</span>
            </div>
            <div class="s-column-name">
                <div>
                    <template v-if="item.type === 'feature'">
                        <span class="s-icon icon size-12 shift-inherit" v-if="item.data.available_for_sku"><svg><use xlink:href='{$_sprite_url}#sitemap'></use></svg></span>
                        <span class="s-icon icon size-12 shift-inherit text-light-gray" v-else><svg><use xlink:href='{$_sprite_url}#sitemap-slash'></use></svg></span>
                    </template>
                    <span class="s-name">{ { item.data.name } }</span>
                </div>
                <div>
                    <span class="s-code" v-if="item.data.code" v-html="item.data.code"></span>
                </div>
            </div>
            <div class="s-column-values">
                <div class="s-values-list">
                    <template v-if="values.length">
                        <template v-for="value in values">
                            <span class="s-value">
                                <span class="s-color icon color shift-2 size-12" v-if="value.color" v-bind:style="{ 'background': value.color }"></span>
                                <span class="s-name" v-html="value.name"></span>
                                <span class="s-currency" v-html="value.currency" v-if="value.currency"></span>
                                <span class="s-unit" v-html="value.unit" v-if="value.unit"></span>
                            </span>
                        </template>
                    </template>
                    <template v-else>
                        [`Value not specified`]
                    </template>
                </div>
            </div>
            <div class="s-column-actions nowrap">
                <div class="flexbox space-8">
                    <div class="s-action" v-on:click="edit" v-bind:class="{ 'cursor-pointer hover-blue' : !states.is_locked }">
                        <span class="s-icon icon shift-0" v-bind:key="'fa-spinner'" v-if="states.is_locked"><i class="fas fa-spinner fa-spin"></i></span>
                        <span class="s-icon icon shift-0" v-bind:key="'fa-pen'" v-else><i class="fas fa-pen"></i></span>
                    </div>
                    <div class="s-action cursor-pointer hover-red" v-on:click="remove">
                        <span class="s-icon icon shift-0"><i class="fas fa-trash-alt"></i></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/capture}
{$_components["component-category-feature-item"] = $_component_category_feature_item|strip}

<div class="wa-dialog s-category-edit-dialog" id="js-category-edit-dialog">
    <div class="dialog-background"></div>
    <div class="dialog-body">
        <div class="js-vue-section" style="visibility: hidden;">
            <div class="dialog-header">
                <div class="flexbox space-12">
                    <div class="s-title-wrapper wide">
                        <h3 class="s-title">
                            <span v-if="category.id" v-once>{sprintf(_w("“%s” category editing"), "{ { category.name } }")}</span>
                            <span v-else>{_w("Adding a new category")}</span>
                        </h3>
                    </div>
                    <div class="s-category-ident nowrap" v-if="category.id">
                        <span class="s-label">id:</span>
                        <span class="s-id">{ { category.id } }</span>
                    </div>
                </div>
            </div>
            <div class="dialog-content">

                <div class="s-category-form">
                    <div class="fields s-category-main-section">
                        {* NAME *}
                        <div class="field s-field-wrapper">
                            <div class="name for-input">
                                <span class="s-name">[`Category name`]</span>
                                <span class="s-icon icon" data-tooltip-id="category-name"><i class="fas fa-question-circle gray"></i></span>
                            </div>
                            <div class="value">
                                <div class="s-field-wrapper">
                                    <component-textarea
                                        class="s-category-name-field bold full-width js-autofocus"
                                        placeholder="{_w("Category name")|escape}"
                                        rows="1"
                                        v-model="category.name"
                                        v-bind:class="{ 'state-error' : errors['category_name'] }"
                                        v-on:blur="onBlurName"
                                        v-on:input="onChangeName"></component-textarea>
                                </div>
                                <div class="state-error-hint"
                                     v-if="errors['category_name']"
                                     v-html="errors['category_name'].text"></div>
                            </div>
                        </div>

                        {* URL *}
                        <div class="field s-field-wrapper s-field-ulr-wrapper">
                            <div class="name shift-0">
                                <div class="wa-label for-input">
                                    <div>
                                        <span class="s-name">[`Category page`]</span>
                                        <span class="s-icon icon" data-tooltip-id="category-url"><i class="fas fa-question-circle gray"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="value">
                                <div class="flexbox middle space-16">

                                    <div class="s-field-wrapper wide">
                                        <div class="s-url-field-wrapper" v-bind:class="{ 'is-focus' : states.category_url_focus }">
                                            <span class="s-tail text-ellipsis" v-bind:title="category.frontend_base_url" v-text="category.frontend_base_url"></span>
                                            <input type="text" class="s-field full-width"
                                                   v-model="category.url"
                                                   v-on:focus="states.category_url_focus = true"
                                                   v-on:blur="states.category_url_focus = false">
                                        </div>
                                    </div>
                                    <div class="s-actions flexbox space-12">
                                        <div class="s-action cursor-pointer"
                                             v-if="states.copy_locked">
                                            <span class="s-icon icon text-green" v-bind:key="'fa-check'"><i class="fas fa-check"></i></span>
                                        </div>
                                        <div class="s-action cursor-pointer"
                                             v-else
                                             v-on:click="onCopyUrl">
                                            <span class="s-icon icon text-gray hover-blue" v-bind:key="'fa-copy'"><i class="fas fa-copy"></i></span>
                                        </div>

                                        <div class="s-action"
                                             v-bind:class="{ 'cursor-pointer' : name_is_changed }"
                                             v-on:click="onSyncUrl">

                                            <template v-if="(states.url_sync_started || states.transliterate_xhr !== null)">
                                                <span class="s-icon icon text-gray" v-bind:key="'spin'"><i class="fas fa-sync fa-spin"></i></span>
                                            </template>
                                            <template v-else>
                                                <span class="s-icon icon" v-bind:class="{ 'text-gray hover-blue' : name_is_changed, 'text-light-gray' : !name_is_changed }" v-bind:key="'sync'"><i class="fas fa-sync"></i></span>
                                            </template>
                                        </div>
                                    </div>
                                </div>

                                <template v-if="category.frontend_urls.length">
                                    <component-category-visible-storefronts
                                        v-bind:category="category"
                                        v-bind:storefronts="category.frontend_urls"></component-category-visible-storefronts>
                                </template>
                            </div>
                        </div>

                        {* URL PARAMS *}
                        <div class="field s-field-wrapper s-field-ulr-params-wrapper">
                            <div class="name shift-0">
                                <span class="s-name">[`Link URL for website menu`]</span>
                                <span class="s-icon icon" data-tooltip-id="category-url-params"><i class="fas fa-question-circle gray"></i></span>
                            </div>
                            <div class="value">

                                <div class="flexbox space-8">
                                    <div class="column flexbox middle nowrap">
                                        <span class="icon size-16 text-gray custom-mr-8"
                                              v-if="states.visible_menu_url"
                                              v-bind:key="'fa-eye'"><i class="fas fa-eye"></i></span>
                                        <span class="icon size-16 text-light-gray custom-mr-8"
                                              v-else
                                              v-bind:key="'fa-eye-slash'"><i class="fas fa-eye-slash"></i></span>
                                        <component-switch v-model="states.visible_menu_url"></component-switch>
                                    </div>
                                    <div class="column">
                                        <div class="s-title">
                                            <template v-if="states.visible_menu_url">[`Link to category is available in the website menu.`]</template>
                                            <template v-else>[`The link to the category page will not be displayed in the website menu but the page will be available at its URL.`]</template>
                                        </div>
                                        <div class="s-checkbox-wrapper" v-if="category.id && category_data.categories.length">
                                            <label class="flexbox space-8">
                                                <span class="s-checkbox">
                                                    <component-checkbox
                                                        v-bind:label="false"
                                                        v-model="states.visible_menu_url_at_subcategories"></component-checkbox>
                                                </span>
                                                <span class="s-text">[`Apply this setting’s value to all subcategories.`]</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        {* TYPE *}
                        <div class="field s-field-wrapper">
                            <div class="name">
                                <span class="s-name">[`Category type`]</span>
                            </div>
                            <div class="value">

                                <div class="s-dropdown-wrapper" style="margin-bottom: .5rem;">
                                    <component-dropdown
                                        v-model="category.type"
                                        v-bind:disabled="!!category.id || category.preselected"
                                        v-bind:button_class="'gray-field'"
                                        v-bind:options="category_types"></component-dropdown>
                                </div>
                                <template v-if="category.type === '0'">
                                    <div class="hint">[`The category is filled with products manually by a user in the store backend.`]</div>
                                </template>
                                <template v-else-if="category.type === '1'">
                                    <div class="hint">[`The category is filled with products automatically according to the parameters selected below.`]</div>
                                </template>
                            </div>
                        </div>

                        <!-- plugin hook: 'backend_prod_category_dialog.top' -->
                        {* @event backend_prod_category_dialog.%plugin_id%.top *}
                        {if !empty($backend_prod_category_dialog)}{foreach $backend_prod_category_dialog as $_}{ifset($_, 'top', '')}{/foreach}{/if}

                        {* PARAMS *}
                        <template v-if="category.type === '1'">
                            <component-category-features-section></component-category-features-section>
                        </template>
                    </div>

                    {* Представление на витрине *}
                    <div class="s-form-section s-category-details-section">
                        <div class="s-section-header">
                            <h5 class="s-section-title">[`Displaying in the storefront`]</h5>
                        </div>
                        <div class="s-section-body">

                            <div class="fields">
                                {* Отображение товаров из подкатегорий *}
                                <div class="field">
                                    <div class="name shift-0">
                                        <span class="s-name">[`Displaying products from subcategories`]</span>
                                    </div>
                                    <div class="value">

                                        <div class="flexbox space-12">
                                            <div class="s-switch-wrapper">
                                                <component-switch v-model="category.include_sub_categories" v-on:change="onChangeIncludeSubCategories"></component-switch>
                                            </div>
                                            <div class="s-text-wrapper">
                                                <template v-if="category.include_sub_categories">
                                                    <div class="s-title">[`Enabled`]</div>
                                                    <div class="s-description hint">[`Products that are not directly added to this category but are contained in its subcategories will also be visible in this category.`]</div>
                                                </template>
                                                <template v-else>
                                                    <div class="s-title">[`Disabled`]</div>
                                                    <div class="s-description hint">[`The category will contain only those products which have been directly added to it.`]</div>
                                                </template>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                {* Сортировка товаров при загрузке страницы категории *}
                                <div class="field">
                                    <div class="name shift-4">
                                        <span class="s-name">[`Default product sorting on the category page`]</span>
                                    </div>
                                    <div class="value">

                                        <div class="s-dropdown-wrapper">
                                            <component-dropdown
                                                v-model="category.sort_products"
                                                v-bind:button_class="'gray-field'"
                                                v-bind:options="sort_products_variants"></component-dropdown>
                                        </div>
                                        <div class="s-description hint">
                                            <template v-if="!category.include_sub_categories">[`The sort order that will be applied to the product listing when the category page is opened.`]</template>
                                            <template v-else>{sprintf_wp('Sorting option “%s” is available only when the “%s” setting is disabled.', _w('Manual (as defined in the backend)'), _w('Displaying products from subcategories'))}</template>
                                        </div>

                                    </div>
                                </div>

                                {* Выбор варианта сортировки *}
                                <div class="field">
                                    <div class="name shift-0">
                                        <span class="s-name">[`Sorting option selection`]</span>
                                    </div>
                                    <div class="value">

                                        <div class="flexbox space-12">
                                            <div class="s-switch-wrapper">
                                                <component-switch v-model="category.enable_sorting" v-on:change="resizeDialog"></component-switch>
                                            </div>
                                            <div class="s-text-wrapper">
                                                <template v-if="category.enable_sorting">
                                                    <div class="s-title">[`Available on the category page`]</div>
                                                    <div class="s-description hint">[`Website visitors will be able to select the sort order of products on the category page.`]</div>
                                                </template>
                                                <template v-else>
                                                    <div class="s-title">[`Unavailable on the category page`]</div>
                                                    <div class="s-description hint">[`There will be no option to select the sort order of products on the category page.`]</div>
                                                </template>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                {* Фильтрация товаров на витрине *}
                                <div class="field js-category-filter-section">
                                    <div class="name shift-0">
                                        <span class="s-name">[`Products filtering in the storefront`]</span>
                                    </div>
                                    <div class="value">

                                        <div class="flexbox space-12">
                                            <div class="s-switch-wrapper">
                                                <component-switch v-model="category.allow_filter" v-on:change="onChangeAllowFilter"></component-switch>
                                            </div>
                                            <div class="s-text-wrapper">
                                                <template v-if="category.allow_filter">
                                                    <div class="s-title">[`Available on the category page`]</div>
                                                    <div class="s-description hint">[`Select product properties that will allow customers to filter products by their values; e.g., by color, manufacturer or price.`]</div>
                                                </template>
                                                <template v-else>
                                                    <div class="s-title">[`Unavailable on the category page`]</div>
                                                    <div class="s-description hint">[`There will be no option to filter products on the category page.`]</div>
                                                </template>

                                                <template v-if="category.allow_filter">
                                                    <component-category-filter-section></component-category-filter-section>
                                                </template>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <!-- plugin hook: 'backend_prod_category_dialog.storefront' -->
                                {* @event backend_prod_category_dialog.%plugin_id%.storefront *}
                                {if !empty($backend_prod_category_dialog)}{foreach $backend_prod_category_dialog as $_}{ifset($_, 'storefront', '')}{/foreach}{/if}

                                {* Описание категории *}
                                <div class="field">
                                    <div class="name shift-0">
                                        <span class="s-name">[`Category description`]</span>
                                    </div>
                                </div>
                                <component-category-description-redactor v-model="category.description"></component-category-description-redactor>
                            </div>

                        </div>
                    </div>

                    {* Публикация *}
                    <div class="s-form-section s-category-publication-section">
                        <div class="s-section-header">
                            <h5 class="s-section-title">[`Publication`]</h5>
                        </div>
                        <div class="s-section-body">
                            <component-category-storefronts-section
                                v-bind:root_states="states"
                                v-bind:category="category"
                                v-bind:category_data="category_data"
                                v-bind:storefronts="storefronts"></component-category-storefronts-section>
                        </div>

                        <!-- plugin hook: 'backend_prod_category_dialog.publication' -->
                        {* @event backend_prod_category_dialog.%plugin_id%.publication *}
                        {if !empty($backend_prod_category_dialog)}{foreach $backend_prod_category_dialog as $_}{ifset($_, 'publication', '')}{/foreach}{/if}

                    </div>

                    {* Отображение в поисковых системах *}
                    <div class="s-form-section s-category-meta-section">
                        <div class="s-section-header">
                            <h5 class="s-section-title">[`For search systems`]</h5>
                        </div>
                        <div class="s-section-body">

                            <div class="s-fields-wrapper fields">
                                <div class="field">
                                    <div class="name shift-4">
                                        <div>[`Page title`]</div>
                                        <div class="hint">&lt;title&gt;</div>
                                    </div>
                                    <div class="value">
                                        <div class="s-textarea-wrapper">
                                            <component-textarea
                                                v-model="category.meta_title"
                                                v-bind:class="'small wide'"></component-textarea>
                                        </div>

                                        <div class="s-textarea-details">
                                            <div class="s-letters-wrapper">
                                                <span class="s-letters-count" v-html="getLettersHTML(category.meta_title, 55, 75)"></span>
                                                <span>[`Recommended: 55—75.`]</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="name shift-4">
                                        <div>[`Page description`]</div>
                                        <div class="hint">&lt;meta description&gt;</div>
                                    </div>
                                    <div class="value">
                                        <div class="s-textarea-wrapper">
                                            <component-textarea
                                                v-model="category.meta_description"
                                                v-bind:class="'small wide'"></component-textarea>
                                        </div>

                                        <div class="s-textarea-details">
                                            <div class="s-letters-wrapper">
                                                <span class="s-letters-count" v-html="getLettersHTML(category.meta_description, 55, 75)"></span>
                                                <span>[`Recommended: 55—75.`]</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="name shift-4">
                                        <div>[`Keywords`]</div>
                                        <div class="hint">&lt;meta keywords&gt; ([`optional`])</div>
                                    </div>
                                    <div class="value">
                                        <div class="s-textarea-wrapper">
                                            <component-textarea
                                                v-model="category.meta_keywords"
                                                v-bind:class="'small wide'"></component-textarea>
                                        </div>

                                        <div class="s-textarea-details">
                                            <div class="s-letters-wrapper">
                                                <span class="s-letters-count" v-html="getLettersHTML(category.meta_keywords, 55, 75)"></span>
                                                <span>[`Recommended: 55—75.`]</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- plugin hook: 'backend_prod_category_dialog.seo' -->
                                {* @event backend_prod_category_dialog.%plugin_id%.seo *}
                                {if !empty($backend_prod_category_dialog)}{foreach $backend_prod_category_dialog as $_}{ifset($_, 'seo', '')}{/foreach}{/if}

                            </div>

                        </div>
                    </div>

                    {* Вид в соцсетях *}
                    <div class="s-form-section s-category-seo-section">
                        <div class="s-section-header">
                            <h5 class="s-section-title">[`For social media`]</h5>
                        </div>
                        <div class="s-section-body">

                            <div class="s-fields-wrapper fields">
                                {* Switch *}
                                <div class="field">
                                    <div class="name shift-0">
                                        <div>[`Use meta tags for search systems`]</div>
                                    </div>
                                    <div class="value">

                                        <div class="flexbox space-12">
                                            <div class="s-switch-wrapper">
                                                <component-switch v-model="category.og.enabled" v-on:change="resizeDialog"></component-switch>
                                            </div>
                                            <div class="s-text-wrapper">
                                                <template v-if="category.og.enabled">
                                                    <div class="s-title">[`Enabled`]</div>
                                                    <div class="s-description hint">[`Values specified for search systems will be used. An image and a video will be automatically selected by a social media from those available on the page.`]</div>
                                                </template>
                                                <template v-else>
                                                    <div class="s-title">[`Disabled`]</div>
                                                </template>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <template v-if="!category.og.enabled">
                                    {* Title *}
                                    <div class="field">
                                        <div class="name shift-4">
                                            <div>[`Title`]</div>
                                            <div class="hint">og:title</div>
                                        </div>
                                        <div class="value">
                                            <div class="s-textarea-wrapper">
                                                <component-textarea
                                                    v-model="category.og.title"
                                                    v-bind:class="'small wide'"></component-textarea>
                                            </div>

                                            <div class="s-textarea-details">
                                                <div class="s-letters-wrapper">
                                                    <span class="s-letters-count" v-html="getLettersHTML(category.og.title, 55, 75)"></span>
                                                    <span>[`Recommended: 55—75.`]</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {* Description *}
                                    <div class="field">
                                        <div class="name shift-4">
                                            <div>[`Description`]</div>
                                            <div class="hint">og:description</div>
                                        </div>
                                        <div class="value">
                                            <div class="s-textarea-wrapper">
                                                <component-textarea
                                                    v-model="category.og.description"
                                                    v-bind:class="'small wide'"></component-textarea>
                                            </div>

                                            <div class="s-textarea-details">
                                                <div class="s-letters-wrapper">
                                                    <span class="s-letters-count" v-html="getLettersHTML(category.og.description, 55, 75)"></span>
                                                    <span>[`Recommended: 55—75.`]</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {* Image *}
                                    <div class="field">
                                        <div class="name shift-4">
                                            <div>[`Image`]</div>
                                            <div class="hint">og:image</div>
                                        </div>
                                        <div class="value">
                                            <div class="s-input-wrapper">
                                                <input class="small gray-field wide" type="text" v-model="category.og.image">
                                            </div>
                                            <div class="hint">[`If no image URL is specified then a social media will automatically select one from those available on the page.`]</div>
                                        </div>
                                    </div>
                                    {* Video URL *}
                                    <div class="field">
                                        <div class="name shift-4">
                                            <div>[`Video URL`]</div>
                                            <div class="hint">og:video</div>
                                        </div>
                                        <div class="value">
                                            <div class="s-input-wrapper">
                                                <input class="small gray-field wide" type="text" v-model="category.og.video">
                                            </div>
                                        </div>
                                    </div>
                                    {* Page type *}
                                    <div class="field">
                                        <div class="name shift-4">
                                            <div>[`Page type`]</div>
                                            <div class="hint">og:type</div>
                                        </div>
                                        <div class="value">
                                            <div class="s-input-wrapper">
                                                <input class="small gray-field wide" type="text" v-model="category.og.type">
                                            </div>
                                        </div>
                                    </div>
                                </template>

                                <!-- plugin hook: 'backend_prod_category_dialog.og' -->
                                {* @event backend_prod_category_dialog.%plugin_id%.og *}
                                {if !empty($backend_prod_category_dialog)}{foreach $backend_prod_category_dialog as $_}{ifset($_, 'og', '')}{/foreach}{/if}
                            </div>

                        </div>
                    </div>

                    {* PARAMS *}
                    <div class="s-form-section s-category-params-section">
                        <div class="s-section-header">
                            <h5 class="s-section-title">[`Custom parameters`]</h5>
                        </div>
                        <div class="s-section-body">

                            <div class="wa-message small white flexbox space-8">
                                <div class="message-icon"><i class="fas fa-info-circle"></i></div>
                                <div class="message-text wide">
                                    [`Optional set of custom <em>key=value</em> parameters which can be used in design theme templates as <em>&#123;$category.params.key&#125;</em>. Each key=value pair must be on a separate line.`]
                                </div>
                            </div>

                            <component-textarea
                                v-model="category.params"
                                v-on:change="resizeDialog"
                                v-bind:class="'small wide'"></component-textarea>
                        </div>
                    </div>

                    <!-- plugin hook: 'backend_prod_category_dialog.bottom' -->
                    {* @event backend_prod_category_dialog.%plugin_id%.bottom *}
                    {if !empty($backend_prod_category_dialog)}{foreach $backend_prod_category_dialog as $_}{ifset($_, 'bottom', '')}{/foreach}{/if}
                </div>

            </div>
            <div class="dialog-footer">
                <button class="button" type="button" v-bind:class="status_change_class" v-on:click.prevent="save" v-bind:disabled="has_errors || states.locked">
                    <span class="s-icon icon size-14" v-if="states.locked"><i class="fas fa-spinner fa-spin"></i></span>
                    <span class="s-name" v-if="category.id">[`Save`]</span>
                    <span class="s-name" v-else>[`Create`]</span>
                </button>
                <button class="js-dialog-close button light-gray" type="button">[`Cancel`]</button>
            </div>
        </div>
    </div>

    <script>
        ( function($) {
            var sources = [{
                id: "ace-js",
                type: "js",
                uri: "{$wa_url}wa-content/js/ace/ace.js?v=={$wa->version(true)}"
            }, {
                id: "redactor-2-css",
                type: "css",
                uri: "{$wa_url}wa-content/js/redactor/2/redactor.css?v={$wa->version(true)}"
            }, {
                id: "redactor-2-js",
                type: "js",
                uri: "{$wa_url}wa-content/js/redactor/2/redactor.min.js?v={$wa->version(true)}"
            }, {
                id: "wa-editor-2-js",
                type: "js",
                uri: "{$wa_url}wa-content/js/jquery-wa/editor2.js?v={$wa->version(true)}"
            }];

            $.wa.loadSources(sources).then( function() {
                var locale = {$_lang|json_encode};
                if (["ru"].indexOf(locale) >= 0) {
                    $.wa.loadSources([{
                        id: "redactor-2-{$_lang}-js",
                        type: "js",
                        uri: "{$wa_url}wa-content/js/redactor/2/{$_lang}.js?v={$wa->version(true)}"
                    }]).then(init);
                } else {
                    init();
                }
            });

            function init() {
                var $dialog = $("#js-category-edit-dialog").removeAttr("id"),
                    dialog = $dialog.data("dialog");

                // avoid console.log() Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
                $dialog.find('script').remove();
                $dialog.find('style').appendTo('head');

                dialog.options.ready.done( function() {
                    dialog.options.initDialog($dialog, dialog, {
                        components: {$_components|json_encode},
                        templates: {$_templates|json_encode},
                        tooltips: {$_tooltips|json_encode},
                        locales: {$_locales|json_encode},

                        lang: {$_lang|json_encode},
                        category: {$category|json_encode},
                        category_sort_variants: {$category_sort_variants|json_encode}
                    });
                });
            }
        })(jQuery);
    </script>
</div>