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

{$_sort_options = [
    [
        "name" => _w("Sort order"),
        "value" => ""
    ],
    [
        "name" => _w("By name"),
        "value" => "name ASC"
    ],
    [
        "name" => _w("By name (in reverse order)"),
        "value" => "name DESC"
    ],
    [
        "name" => _w("Most expensive"),
        "value" => "price DESC"
    ],
    [
        "name" => _w("Least expensive"),
        "value" => "price ASC"
    ]
]}

{$_components = []}

{capture assign="_component_checkbox"}
    <component v-bind:is="tag" class="wa-checkbox">
        <input type="checkbox" v-bind:checked="modelValue" v-bind:id="field_id" v-on:change="onChange" v-bind:disabled="prop_disabled" tabindex="-1">
        <span>
            <span class="icon"><i class="fas fa-check"></i></span>
        </span>
    </component>
{/capture}
{$_components["component-checkbox"] = $_component_checkbox|strip}

{capture assign="_component_dropdown_products_sorting"}
    <div class="vue-component-dropdown-products-sorting">
        <span class="s-icon icon size-20 shift-2"><svg><use xlink:href="{$_sprite_url}#sort"></use></svg></span>

        <div class="dropdown js-dropdown">
            <button class="dropdown-toggle button small outlined" type="button">{ { active_option.name } }</button>
            <div class="dropdown-body">
                <template v-for="option in options">
                    <div class="dropdown-item"
                         v-if="option.value.length"
                         v-bind:class="{ 'selected' : (option === active_option) }"
                         v-on:click.prevent="change(option)">
                        <span class="s-label">{ { option.name } }</span>
                    </div>
                </template>
            </div>
        </div>
    </div>
{/capture}
{$_components["component-dropdown-products-sorting"] = $_component_dropdown_products_sorting|strip}

<div class="wa-dialog s-category-sort-products-dialog" id="js-category-sort-products-dialog">
    <div class="dialog-background"></div>
    <div class="dialog-body">
        <div class="js-vue-section" style="visibility: visible;">
            <div class="dialog-header">
                <h3 class="s-title wide">{sprintf(_w("Product sorting for the “%s” category"), "{ { category.name } }")}</h3>

                <template v-if="render_products && products.length">
                    <template v-if="!states.sort_locked">
                        <component-dropdown-products-sorting v-model="sort" v-on:change="changeSort"></component-dropdown-products-sorting>
                    </template>
                    <template v-else>
                        <div class="s-load-message">
                            <span class="s-icon icon size-16"><i class="fas fa-spinner fa-spin"></i></span>
                            <span class="s-text">[`Products are being sorted, please wait.`]</span>
                        </div>
                    </template>
                </template>

                <div class="s-close-button cursor-pointer js-dialog-close">
                    <span class="s-icon icon size-20"><svg><use xlink:href="{$_sprite_url}#times"></use></svg></span>
                </div>
            </div>
            <div class="dialog-content">

                <template v-if="render_products">
                    <template v-if="products.length">
                        <div class="s-products-list" v-bind:class="{ 'is-locked' : states.sort_locked }">
                            <div class="s-product-wrapper"
                                    v-for="product in products"
                                    v-bind:class="{ 'is-selected' : product.states.selected, 'is-moving' : product.states.moving }"
                                    v-bind:data-id="product.id"
                                    v-bind:key="product.id">

                                <div class="s-column-toggle">
                                    <div class="s-middle-content">
                                        <template v-if="!product.states.move_locked">
                                            <span class="s-icon icon size-16 cursor-move js-product-move-toggle" draggable="true"><svg><use xlink:href='{$_sprite_url}#grip'></use></svg></span>
                                        </template>
                                        <template v-else>
                                            <span class="s-icon icon size-16"><i class="fas fa-spinner fa-spin"></i></span>
                                        </template>
                                    </div>
                                </div>
                                <div class="s-column-checkbox">
                                    <div class="s-middle-content">
                                        <component-checkbox v-model="product.states.selected" v-on:change="onSelect(product)"></component-checkbox>
                                    </div>
                                </div>
                                <div class="s-column-image">
                                    <div class="s-image-wrapper">
                                        <template v-if="product.photo">
                                            <div class="s-image" v-bind:style="{ 'background-image' : 'url('+product.photo.url+')' }">
                                        </template>
                                        <template v-else>
                                            {$_sprite_url = "`$wa_url`wa-apps/shop/img/backend/products/product/icons.svg?v=`$wa->version()`"}
                                            <span class="s-icon icon size-18"><svg><use xlink:href='{$_sprite_url}#empty-image-2'></use></svg></span>
                                        </template>
                                    </div>
                                </div>
                                <div class="s-column-name">
                                    <div class="s-middle-content">
                                        <div class="s-name" v-html="product.name"></div>
                                    </div>
                                </div>
                                <div class="s-column-price">
                                    <div class="s-middle-content end">
                                        <div class="s-price" v-html="product.price_html"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="s-empty-message">[`The category has no products for sorting.`]</div>
                    </template>
                </template>
                <template v-else>
                    <div class="s-warn-message">
                        <p>[`The category contains too many products. Displaying all of them may cause increased load to your computer. Click the button below if you are sure to display all products.`]</p>
                        <p>
                            <button class="button small yellow" type="button"
                                    v-bind:disabled="states.force_locked"
                                    v-on:click.prevent="forceRender">
                                <span class="s-icon icon top" v-if="states.force_locked"><i class="fas fa-spinner fa-spin"></i></span>
                                <span class="s-name"> [`Show all products`]</span>
                            </button>
                        </p>
                    </div>
                </template>

            </div>
            <div class="dialog-footer" v-if="selected_products.length && !states.locked">
                <div class="flexbox middle space-16">
                    <div class="s-selection-counter">
                        <span class="s-label">[`Selected`] </span>
                        <span class="s-count" v-text="selected_products.length"></span>
                    </div>

                    <div class="s-action cursor-pointer link" v-on:click="moveUp">
                        <span class="s-icon icon size-16"><svg><use xlink:href="{$_sprite_url}#chevron-double-up"></use></svg></span>
                        <span class="s-name"> [`to beginning`]</span>
                    </div>

                    <div class="s-action cursor-pointer link" v-on:click="moveDown">
                        <span class="s-icon icon size-16"><svg><use xlink:href="{$_sprite_url}#chevron-double-down"></use></svg></span>
                        <span class="s-name"> [`to end`]</span>
                    </div>

                    <div class="s-close-action wide">
                        <span class="s-icon icon size-20 cursor-pointer" v-on:click="revert"><svg><use xlink:href="{$_sprite_url}#times"></use></svg></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        ( function($) {
            $.wa_shop_products.init.initCategorySortDialog({
                $wrapper: $("#js-category-sort-products-dialog").removeAttr("id"),
                components: {$_components|json_encode},
                urls: {
                    "category_sort_dialog": "{$wa_app_url}?module=prod&action=categorySortDialog",
                    "sort": "{$wa_app_url}?module=prod&action=categorySortDialogSave",
                    "move": "{$wa_app_url}?module=prod&action=categorySortDialogSave"
                },

                sort_options: {$_sort_options|json_encode},
                category: {$category|json_encode},
                products: {$products|json_encode},
                render_products: {$render_products|json_encode}
            });
        })(jQuery);
    </script>
</div>