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

{$_sort_options = [
    [
        "name" => _w("Sort manually"),
        "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_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}

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

<div class="wa-dialog s-set-sort-products-dialog" id="js-set-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” set"), "{ { set.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 set 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" 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.initSetSortDialog({
                $wrapper: $("#js-set-sort-products-dialog").removeAttr("id"),
                components: {$_components|json_encode},
                urls: {
                    "set_sort_dialog": "{$wa_app_url}?module=prod&action=setSortDialog",
                    "sort": "{$wa_app_url}?module=prod&action=setSortDialogSave",
                    "move": "{$wa_app_url}?module=prod&action=setSortDialogSave"
                },

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