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

{* КОМПОНЕНТЫ *}
{$_components = []}

{capture assign="_component_view_toggle"}
    <div class="vue-component-view-toggle toggle small">
        <div data-id="thumbs" data-tooltip-id="view_thumbs" v-bind:class="{ 'selected' : modelValue === 'thumbs' }">
            <i class="icon"><i class="fas fa-th-large"></i></i>
        </div>
        <div data-id="table_extended" data-tooltip-id="view_table_extended" v-bind:class="{ 'selected' : modelValue === 'table_extended' }">
            <i class="icon"><svg><use xlink:href="{$_sprite_url}#toggle-full"></use></svg></i>
        </div>
        <div data-id="table" data-tooltip-id="view_table" v-bind:class="{ 'selected' : modelValue === 'table' }">
            <i class="icon"><svg><use xlink:href="{$_sprite_url}#toggle-thin"></use></svg></i>
        </div>
    </div>
{/capture}
{$_components["component-view-toggle"] = $_component_view_toggle|strip}

{capture assign="_component_paging"}
{literal}
    <div class="vue-component-paging">
        <div class="s-item">
            <component class="s-toggle"
                       v-on:click.prevent="set(1)"
                       v-bind:is="(page > 1 ? 'a' : 'span')"
                       v-bind:href="(page > 1 ? getHref(1) : null)"
                       v-bind:title="1"
                       v-bind:class="{ 'is-disabled' : page <= 1 }">
                <span class="icon"><i class="fas fa-angle-double-left"></i></span>
            </component>
        </div>
        <div class="s-item">
            <component class="s-toggle"
                       v-on:click.prevent="set(page-1)"
                       v-bind:is="(page > 1 ? 'a' : 'span')"
                       v-bind:href="(page > 1 ? getHref(page-1) : null)"
                       v-bind:title="(page-1 > 0 ? page-1 : 1)"
                       v-bind:class="{ 'is-disabled' : page <= 1 }">
                <span class="icon"><i class="fas fa-angle-left"></i></span>
            </component>
        </div>
        <div class="s-item">
            <div class="s-field-wrapper">
                <input class="s-field is-number" type="text"
                       v-on:input="onInput"
                       v-on:change="onChange"
                       v-bind:value="page">
                <span class="s-divider">[`of`]</span>
                <span class="s-count" v-text="count"></span>
            </div>
        </div>
        <div class="s-item">
            <component class="s-toggle"
                       v-on:click.prevent="set(page+1)"
                       v-bind:is="(page < count ? 'a' : 'span')"
                       v-bind:href="(page < count ? getHref(page+1) : null)"
                       v-bind:title="(page+1 <= count ? page+1 : count)"
                       v-bind:class="{ 'is-disabled' : page >= count }">
                <span class="icon"><i class="fas fa-angle-right"></i></span>
            </component>
        </div>
        <div class="s-item">
            <component class="s-toggle"
                       v-on:click.prevent="set(count)"
                       v-bind:is="(page < count ? 'a' : 'span')"
                       v-bind:href="(page < count ? getHref(count) : null)"
                       v-bind:title="count"
                       v-bind:class="{ 'is-disabled' : page >= count }">
                <span class="icon"><i class="fas fa-angle-double-right"></i></span>
            </component>
        </div>
    </div>
{/literal}
{/capture}
{$_components["component-paging"] = $_component_paging|strip}

{capture assign="_component_paging_dropdown"}
{literal}
    <div class="dropdown s-paging-dropdown">
        <button class="dropdown-toggle button small no-indent outlined" type="button">{ { active_option ? active_option.name : modelValue } }</button>
        <div class="dropdown-body">
            <template v-for="option in options">
                <div class="dropdown-item"
                     v-bind:class="{ 'selected': (active_option ? (active_option.value === option.value) : false) }"
                     v-bind:data-value="option.value">{ { option.name ? option.name : '&nbsp;' } }</div>
            </template>
        </div>
    </div>
{/literal}
{/capture}
{$_components["component-paging-dropdown"] = $_component_paging_dropdown|strip}

{capture assign="_component_product_slider"}
{literal}
    <div class="s-slider-wrapper"
         v-on:mouseenter="onMouseEnter"
         v-on:mouseleave="onMouseLeave">
        <div class="s-slider-list">
            <div class="s-slide-wrapper" v-for="photo in photos" v-bind:key="photo.id">
                {/literal}<a v-bind:href="'{$wa_app_url}' + product_url" class="js-iamge-link">{literal}
                    <div class="s-photo-wrapper" v-bind:style="{ 'background-image': 'url('+photo.url+')'}"></div>
                </a>
            </div>
        </div>
        <div class="s-slider-actions" v-if="photos.length > 1">
            <div class="s-action left"
                 v-on:click.prevent="prev">
                <span class="s-icon icon size-20"><i class="fas fa-chevron-left"></i></span>
            </div>
            <div class="s-action right"
                 v-on:click.prevent="next">
                <span class="s-icon icon size-20"><i class="fas fa-chevron-right"></i></span>
            </div>
        </div>
        <div class="s-slider-controls" v-if="photos.length > 1">
            <div class="s-control-list">
                <div class="s-label" v-if="controls.before_count">{ { "+" + controls.before_count } }</div>
                    <div class="s-control"
                         v-for="photo in controls.photos"
                         v-bind:key="photo.id"
                         v-bind:class="{ 'is-active' : (active_photo === photo), 'is-main' : (photo_id && photo.id === photo_id) }"
                         v-on:click.prevent="change(photo)"></div>
                <div class="s-label" v-if="controls.after_count">{ { "+" + controls.after_count } }</div>
            </div>
        </div>
    </div>
{/literal}
{/capture}
{$_components["component-product-slider"] = $_component_product_slider|strip}

{capture assign="_component_tree_menu"}
    {literal}
    <li
        v-show="displayItem"
        class="vue-component-tree-menu"
        :class="{ 'selected': item.is_selected }"
        @click.stop="onClick"
    >
        <span class="s-item item flexbox"
            :class="itemClass"
            :style="indent"
        >
            <div
                v-if="item[childrenProp] && item[childrenProp].length"
                class="s-caret-wrapper custom-ml-0 custom-mr-4"
                @click.stop="toggleChildren"
            >
                <span v-if="showChildren" class="icon custom-m-0">
                    <i class="fas fa-caret-down"></i>
                </span>
                <span v-else class="icon custom-m-0">
                    <i class="fas fa-caret-right"></i>
                </span>
            </div>
            <div v-else class="custom-mr-20"></div>

            <div
                v-if="$slots.icon"
                class="s-icon-wrapper"
            >
                <slot
                    name="icon"
                    :item="item"
                    :toggle-children="toggleChildren"
                />
            </div>

            <div class="s-name-wrapper wide">
                <span class="s-name"
                    :class="[item.is_locked ? 'is-locked' : 'cursor-pointer', { 'link' : !item.is_locked }]"
                >%item.name%</span>
            </div>
            <!-- <div class="count gray smaller">
                %item.count%
            </div> -->
        </span>
        <slot v-if="displayChildren" name="children">
            <ul class="menu">
                <component-tree-menu
                    v-for="child of item[childrenProp]"
                    :menu-id="menuId"
                    :item="child"
                    :children-prop="childrenProp"
                    :search-string="searchString"
                    :depth="depth + 1"
                >
                    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
                        <slot :name="name" v-bind="slotData" />
                    </template>
                </component-tree-menu>
            </ul>
        </slot>
    </li>
    {/literal}
{/capture}
{$_components["component-tree-menu"] = $_component_tree_menu|strip}

{capture assign="_component_sidebar_section"}
    {literal}
    <section
        class="vue-component-sidebar-section"
        :class="{ 'is-expanded': isExpanded }"
    >
        <header
            class="heading cursor-pointer"
            @click="isExpanded = !isExpanded;$emit('expand', isExpanded)"
        >
            <span class="flexbox middle space-4">
                <span class="icon">
                    <span v-if="isExpanded" class="caret">
                        <i class="fas fa-caret-down"></i>
                    </span>
                    <span v-else class="caret">
                        <i class="fas fa-caret-right"></i>
                    </span>
                </span>

                <span v-if="$slots.icon" class="s-icon icon shift-0">
                    <slot name="icon"></slot>
                </span>

               <span class="s-name">%label%</span>
            </span>
            <a
                v-if="useButtonNew"
                class="count s-new-item"
                href="#"
                :title="titleForNew"
            >
                <i class="fas fa-plus-circle"></i>
            </a>
        </header>

        <div
            v-if="isExpanded"
            class="s-sidebar-list-wrapper"
        >
            <slot></slot>
        </div>
    </section>
    {/literal}
{/capture}
{$_components["component-sidebar-section"] = $_component_sidebar_section|strip}

{* ШАБЛОНЫ *}
{$_templates = []}

{* ПОДСКАЗКИ *}
{$_tooltips = [
    "products-list-date" => [
        "id" => "products-list-date",
        "html" => _w("Product-adding date")|escape
    ],
    "return-to-old-products" => [
        "id" => "return-to-old-products",
        "html" => _w("Return to the old section")|escape,
        "position" => "top",
        "class" => "inline"
    ],
    "product_from_subcategories" => [
        "id" => "product_from_subcategories",
        "html" => _w("This product is contained in a subcategory.")|escape,
        "position" => "top",
        "class" => "inline"
    ],
    "view_thumbs" => [
        "id" => "view_thumbs",
        "html" => _w("Tiles")|escape,
        "position" => "top-right",
        "class" => "inline"
    ],
    "view_table" => [
        "id" => "view_table",
        "html" => _w("Table: product")|escape,
        "position" => "top-right",
        "class" => "inline"
    ],
    "view_table_extended" => [
        "id" => "view_table_extended",
        "html" => _w("Table: product & variant")|escape,
        "position" => "top-right",
        "class" => "inline"
    ]
]}

{* ЛОКАЛИЗАЦИЯ *}
{$_locales = [
    "hidden" => _w("Hidden, not for sale"),
    "published" => _w("Published, for sale"),
    "unpublished" => _w("Unpublished, not for sale"),
    "products_forms" => [
        _w("%d product", "%d products", 1, false),
        _w("%d product", "%d products", 2, false),
        _w("%d product", "%d products", 5, false)
    ],
    "product_sku_forms" => [
        _w("%s in %d SKU", "%s in %d SKUs", 1, false),
        _w("%s in %d SKU", "%s in %d SKUs", 2, false),
        _w("%s in %d SKU", "%s in %d SKUs", 5, false)
    ],
    "product_sku_mod_forms" => [
        _w("%d variant", "%d variants", 1, false),
        _w("%d variant", "%d variants", 2, false),
        _w("%d variant", "%d variants", 5, false)
    ],
    "select_category" => _w("Please select a category")
]}

{* includes will update templates/components array *}
{include file="./components/main.html" scope="parent" inline}
{include file="./components/products/table.html" scope="parent" inline}
{include file="./components/products/thumbs.html" scope="parent" inline}
{include file="./components/products/filters.html" scope="parent" inline}
{include file="./components/products/mass_actions.html" scope="parent" inline}
{include file="./components/products/presentations_dropdown.html" scope="parent" inline}
{include file="./dialogs/errors.html" scope="parent" inline}
{include file="./dialogs/list.column_manager.html" scope="parent" inline}
{include file="./components/products/empty_content.html" scope="parent" inline}

<div class="s-products-list-page" id="js-products-list-page">
    <div class="s-page-wrapper" id="js-vue-section" style="visibility: hidden;">
        <div class="s-page-flexbox">
            <div class="s-page-header">
                <div class="flexbox full-width space-20">
                    <div class="flexbox middle space-20">
                        <div class="s-title-wrapper">
                            <h1 class="s-title">[`Products`]</h1>
                        </div>
                        <div class="s-new-product">
                            <a class="button rounded" href="{$wa_app_url}products/new/general/">
                                <span class="s-icon icon baseline size-12" style="transform: translateY(1px);"><i class="fas fa-plus"></i></span>
                                <span class="s-name">[`New product`]</span>
                            </a>
                            <a class="button light-gray rounded" @click.prevent="presentation.view = 'bulk_add'">
                                <span class="s-icon icon baseline size-12" style="transform: translateY(1px);"><i class="fas fa-list"></i></span>
                                <span class="s-name">[`Add many`]</span>
                            </a>
                        </div>

                        <div class="s-plugins-section-header-left">
                            <!-- plugin hook: 'backend_prod_list.header_left' -->
                            {* @event backend_prod_list.%plugin_id%.header_left *}
                            {if !empty($backend_prod_list)}{foreach $backend_prod_list as $_}{ifset($_, 'header_left', '')}{/foreach}{/if}
                        </div>

                    </div>
                    <div class="flexbox middle space-20">
                        <div class="s-plugins-section-header-right">
                            <!-- plugin hook: 'backend_prod_list.header_right' -->
                            {* @event backend_prod_list.%plugin_id%.header_right *}
                            {if !empty($backend_prod_list)}{foreach $backend_prod_list as $_}{ifset($_, 'header_right', '')}{/foreach}{/if}
                        </div>

                        <div class="s-presentations-section flexbox middle space-8">
                            <div class="s-section-dropdown">
                                <component-dropdown-presentations v-on:change="changePresentation"></component-dropdown-presentations>
                            </div>
                        </div>
                        <component-view-toggle
                            v-model="presentation.view"
                            v-on:change="changeView"></component-view-toggle>
                    </div>
                </div>
                <component-table-filters @show-categories="states.show_sidebar_filters=true"></component-table-filters>
            </div>
            <div class="s-page-body flexbox space-8">
                {* SIDEBAR FILTERS *}
                <div v-if="!states.sidebar_filters_hide" class="s-body-aside sidebar" :class="{ 'is-visible-on-mobile' : states.show_sidebar_filters }">
                    <component-table-filters-categories-sets-types @toggle-mobile="states.show_sidebar_filters=false"></component-table-filters-categories-sets-types>
                </div>
                {* PRODUCTS THUMBS *}
                <div v-if="presentation.view === 'thumbs'" class="s-products-thumbs-section" v-on:scroll="onScrollProductsSection">
                    <div class="s-section-body">
                        <div class="s-thumbs-list">
                            <component-product-thumb v-if="products.length" v-for="(product, i) in products" v-bind:key="product.id" v-bind:index="i" v-bind:product="product"></component-product-thumb>
                            <component-empty-content v-else type="products"></component-empty-content>
                        </div>
                    </div>
                </div>
                <div v-else-if="presentation.view === 'bulk_add'" class="s-products-bulk-add-section">
                    <component-products-bulk-add :filter="product_class_filter" />
                </div>
                {* PRODUCTS TABLE *}
                <div v-else class="s-products-table-section" v-on:scroll="onScrollProductsSection">
                    {* BODY *}
                    <component-products-table
                        v-bind:key="keys.table"
                        v-bind:products="products"></component-products-table>
                </div>
                {* MASS ACTIONS *}
                <template v-if="!states.is_mobile && show_mass_actions">
                    <div class="s-body-aside" v-bind:class="{ 'is-unpinned' : presentation.view === 'thumbs' }">
                        <component-mass-actions
                            v-bind:type="'aside'"
                            v-bind:key="keys.mass_actions"
                            v-bind:products="selected_products"></component-mass-actions>
                    </div>
                </template>
            </div>

            <div class="s-page-footer"
                 v-bind:class="{ 'is-unpinned' : presentation.view === 'thumbs' }">

                <div class="flexbox full-width middle space-16">
                    <div class="s-paging-section">
                        <component-paging
                            v-model="paging.page"
                            v-bind:count="paging.count"
                            v-on:change="changePage"></component-paging>

                        <div class="s-plugins-section-footer-left">
                            <!-- plugin hook: 'backend_prod_list.footer_left' -->
                            {* @event backend_prod_list.%plugin_id%.footer_left *}
                            {if !empty($backend_prod_list)}{foreach $backend_prod_list as $_}{ifset($_, 'footer_left', '')}{/foreach}{/if}
                        </div>
                    </div>

                    <div class="s-filters-wrapper">
                        <div class="s-plugins-section-footer-right">
                            <!-- plugin hook: 'backend_prod_list.footer_right' -->
                            {* @event backend_prod_list.%plugin_id%.footer_right *}
                            {if !empty($backend_prod_list)}{foreach $backend_prod_list as $_}{ifset($_, 'footer_right', '')}{/foreach}{/if}
                        </div>

                        <div class="s-filter-wrapper">{_w("Total of %d product", "Total of %d products", $products_total_count)}</div>
                        <div class="s-filter-wrapper">
                            <span class="s-label">[`Show by`]</span>
                            <component-paging-dropdown
                                v-model="presentation.rows_on_page"
                                v-on:change="changeLimit"></component-paging-dropdown>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="states.is_mobile && show_mass_actions">
                <component-mass-actions
                    v-bind:type="'footer'"
                    v-bind:key="keys.mass_actions"
                    v-bind:products="selected_products"></component-mass-actions>
            </div>
        </div>
    </div>

    <script>
        ( function($) {
            $.wa.title.set("{_w("Products")|escape}");

            {foreach $currencies_data as $_currency_info}
                $.wa.price.addCurrency({$_currency_info|json_encode});
            {/foreach}

            {if $_lang === "ru"}
                $.wa.price.currencies.default.fraction_divider = ",";
            {/if}

            var sources = [{
                id: "vue-js",
                type: "js",
                uri: "{$wa_app_static_url}js/backend/vue/{if $wa->debug()}vue.global.js{else}vue.global.prod.js{/if}?v={$wa->version()}"
            }, {
                id: "wa-shop-products-list-js",
                type: "js",
                uri: "{$wa_app_static_url}js/backend/products/main/main.list.js?v={$wa->version()}"
            }, {
                id: "wa-content-color-picker-js",
                type: "js",
                uri: "{$wa_url}wa-content/js/farbtastic/farbtastic.js?v={$wa->version(true)}"
            }, {
                id: "wa-content-color-picker-css",
                type: "css",
                uri: "{$wa_url}wa-content/js/farbtastic/farbtastic.css?v={$wa->version(true)}"
            }];

            $.wa.loadSources(sources).done( function() {
                $.wa_shop_products.init.initProductsListPage({
                    $wrapper: $("#js-products-list-page"),
                    components: {$_components|json_encode},
                    templates: {$_templates|json_encode},
                    tooltips: {$_tooltips|json_encode},
                    locales: {$_locales|json_encode},
                    urls: {
                        "filter_rule_add"           : "{$wa_app_url}?module=prod&action=filterAddRule",
                        "filter_rule_delete"        : "{$wa_app_url}?module=prod&action=filterDeleteRule",
                        "filter_rule_delete_all"    : "{$wa_app_url}?module=prod&action=filterDeleteAllRules",
                        "filter_feature_value"      : "{$wa_app_url}?module=prod&action=filterGetFeaturesOptions",
                        "filter_rename"             : "{$wa_app_url}?module=prod&action=filterRename",
                        "filter_remove"             : "{$wa_app_url}?module=prod&action=filterDelete",
                        "filter_move"               : "{$wa_app_url}?module=prod&action=filterMove",
                        "filter_rewrite"            : "{$wa_app_url}?module=prod&action=filterRewrite",
                        "filter_create"             : "{$wa_app_url}?module=prod&action=filterDuplicate",

                        "presentation_move"         : "{$wa_app_url}?module=prod&action=presentationMove",
                        "presentation_rename"       : "{$wa_app_url}?module=prod&action=presentationRename",
                        "presentation_remove"       : "{$wa_app_url}?module=prod&action=presentationDelete",
                        "presentation_rewrite"      : "{$wa_app_url}?module=prod&action=presentationRewrite",
                        "presentation_create"       : "{$wa_app_url}?module=prod&action=presentationDuplicate",
                        "presentation_edit_columns" : "{$wa_app_url}?module=prod&action=presentationEditColumns",
                        "presentation_edit_settings": "{$wa_app_url}?module=prod&action=presentationEditSettings",
                        "presentation_get_columns"  : "{$wa_app_url}?module=prod&action=presentationGetColumns",

                        "product_search"            : "{$wa_app_url}?action=autocomplete",
                        "product_update"            : "{$wa_app_url}?module=prod&action=presentationUpdateProduct",
                        "product_exclude"           : "{$wa_app_url}?module=prod&action=presentationExcludeProduct",
                        "product_status"            : "{$wa_app_url}?module=prod&action=saveStatus",
                        "product_url_checker"       : "{$wa_app_url}?module=prod&action=checkUrlInUse",
                        "add_feature_value"         : "{$wa_app_url}?module=prod&action=addFeatureValue",
                        "color_transliterate"       : "{$wa_app_url}?module=settingsTypefeat&action=featuresHelper",

                        "feature_get"               : "{$wa_app_url}?module=prod&action=features",
                        "features_get"              : "{$wa_app_url}?module=prod&action=getFeatures",
                        "tags_get"                  : "{$wa_app_url}?module=prod&action=getTags",
                        "product_bulk_add"          : "{$wa_app_url}?module=prod&action=imagesProducts"
                    },

                    paging: {
                        page : {$page},
                        count: {$pages}
                    },
                    mass_actions        : {$mass_actions|json_encode},
                    stocks              : {$stocks|json_encode},
                    columns             : {$columns|array_values|json_encode},
                    page_url            : "{$wa_app_url}products/",
                    products            : {$products|json_encode},
                    products_total_count: {$products_total_count},
                    filter              : {$filter|json_encode},
                    filters             : {$filters|json_encode},
                    filter_options      : {$filter_options|json_encode},
                    presentations       : {$presentations|json_encode},
                    presentation        : {$active_presentation|json_encode}
                });
            });

        })(jQuery);
    </script>
</div>