{capture assign="_dialog_list_column_manager"}
    <div class="wa-dialog s-list-column-manager-dialog" id="js-list-column-manager-dialog">
        <div class="dialog-background"></div>
        <div class="dialog-body">
            <div class="js-vue-section" style="visibility: hidden;">
                <div class="dialog-header">
                    <h3 class="s-title">[`Product listing columns setup`]</h3>
                    <p class="s-description">[`Select the columns that you would like to show in the product listing. Drag & drop to change columns’ sort order.`]</p>
                    <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 v-if="!states.is_inited" class="skeleton box contentbox">
                    <div class="skeleton-header"></div>
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line"></div>
                </div>
                <template v-else>
                <div class="dialog-content">
                    <div class="s-columns-table" :class="{ 'is-locked' : states.column_expand }">
                        <component-list-column-item v-for="column in active_columns" :key="column.id" :column="column" @column_expanded="onColumnExpand" @column_disabled="onActiveColumnDisabled"></component-list-column-item>
                    </div>

                    <div class="s-search-column-wrapper" v-bind:class="{ 'is-locked' : states.column_expand }">
                        <component-search-column @input="debouncedSearch"></component-search-column>
                    </div>

                    <div class="s-columns-table" v-bind:class="{ 'is-locked' : states.column_expand }">
                        <component-list-column-item v-for="column in inactive_columns" :key="column.id" :column="column" @column_expanded="onColumnExpand" @column_enabled="onInactiveColumnEnabled"></component-list-column-item>
                        <div class="align-center custom-py-16">
                            <div v-if="empty_search_result || (!states.is_fetching && !inactive_columns.length)"
                                class="s-empty-wrapper custom-mt-0"
                            >[`Parameters not found.`]</div>
                            <div
                                v-show="!empty_search_result"
                                class="js-lazyloading"
                                :style="{ visibility: states.is_fetching ? 'visible' : 'hidden' }"
                            >
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dialog-footer">
                    <button class="button" type="button"
                            v-bind:disabled="states.locked"
                            v-on:click.prevent="save">
                        <span class="s-icon" v-if="states.locked"><i class="fas fa-spinner fa-spin"></i></span>
                        <span class="s-name">[`Done`]</span>
                    </button>
                    <button class="js-dialog-close button light-gray" type="button">[`Cancel`]</button>
                </div>
                </template>
            </div>
        </div>
    </div>
{/capture}
{$_templates["dialog-list-column-manager"] = $_dialog_list_column_manager|strip}

{capture assign="_component_list_column_item"}
    <div class="s-item-wrapper" v-bind:data-id="column.id" v-bind:class="item_class" v-show="column.states.display">
        {* Table *}
        <div class="s-item-table">
            <div class="s-column s-column-toggle">
                <template v-if="column.enabled">
                    <div class="s-toggle-wrapper cursor-move js-column-move-toggle" draggable="true" v-show="!states.show_settings">
                        <span class="s-icon icon baseline size-14"><svg><use xlink:href='{$_sprite_url}#grip'></use></svg></span>
                    </div>
                </template>
            </div>
            <div class="s-column s-column-enable">
                <component-switch v-bind:model-value="column.enabled" v-bind:disabled="column.disabled" v-on:change="onToggleSwitch" v-show="!states.show_settings"></component-switch>
            </div>
            <div class="s-column s-column-visibility">
                <template v-if="is_feature">
                    <template v-if="column_info.available_for_sku">
                        <span class="s-icon icon" v-bind:key="'fa-sitemap'"><svg class="text-gray"><use xlink:href='{$_sprite_url}#sitemap'></use></svg></span>
                    </template>
                    <template v-else>
                        <span class="s-icon icon" v-bind:key="'fa-sitemap-slash'"><svg class="text-light-grayer"><use xlink:href='{$_sprite_url}#sitemap-slash'></use></svg></span>
                    </template>
                    <template v-if="column_info.visible_in_frontend">
                        <span class="s-icon icon" v-bind:key="'fa-eye'"><i class="fas fa-eye text-gray"></i></span>
                    </template>
                    <template v-else>
                        <span class="s-icon icon" v-bind:key="'fa-eye-slash'"><i class="fas fa-eye-slash text-light-grayer"></i></span>
                    </template>
                </template>
                <template v-else-if="is_virtual_stock">
                    <span class="s-icon icon shift-up-1 text-light-gray"><svg><use xlink:href='{$_sprite_url}#warehouse_stroke'></use></svg></span>
                </template>
                <template v-else-if="is_stock">
                    <span class="s-icon icon shift-up-1 text-light-gray"><svg><use xlink:href='{$_sprite_url}#warehouse'></use></svg></span>
                </template>
            </div>
            <div class="s-column s-column-name">
                <span class="s-name" v-text="column.name"></span>
                <span class="s-code hint" v-if="column.feature_code" v-text="column.feature_code"></span>
            </div>
            <div class="s-column s-column-edit">
                <span class="link" v-if="column.enabled && settings" v-on:click="setup">{ { states.show_settings ? {_w("hide")|json_encode} : {_w("configure")|json_encode}  } }</span>
            </div>
        </div>

        {* Settings *}
        <template v-if="settings">
            <div class="s-settings-section" v-if="states.show_settings">
                <template v-if="column.id === 'name'">
                    <div class="s-options-list">
                        <div class="s-option-wrapper">
                            <label class="flexbox space-8">
                                <span class="s-radio">
                                    <component-radio v-model="settings.long_name_format"
                                                     v-bind:label="false"
                                                     v-bind:val="''"
                                                     v-bind:name="column.id + '-radio-option'"></component-radio></span>
                                <span class="s-label">[`Wrap long product names into several lines`]</span>
                            </label>
                        </div>
                        <div class="s-option-wrapper">
                            <label class="flexbox space-8">
                                <span class="s-radio">
                                    <component-radio v-model="settings.long_name_format"
                                                     v-bind:label="false"
                                                     v-bind:val="'hide_end'"
                                                     v-bind:name="column.id + '-radio-option'"></component-radio></span>
                                <span class="s-label">[`Truncate long product names to fit into one line`]</span>
                            </label>
                        </div>
                    </div>
                </template>
                <template v-else-if="column.id === 'tags'">
                    <div class="s-field-wrapper">
                        <div class="s-label">[`Number of tags displayed in the table:`]</div>
                        <input type="text" v-model="settings.visible_count">
                    </div>
                </template>
                <template v-else-if="column.id === 'categories'">
                    <div class="s-field-wrapper">
                        <div class="s-label">[`Number of categories displayed in the table:`]</div>
                        <input type="text" v-model="settings.visible_count">
                    </div>
                </template>
                <template v-else-if="column.id === 'sets'">
                    <div class="s-field-wrapper">
                        <div class="s-label">[`Number of sets displayed in the table:`]</div>
                        <input type="text" v-model="settings.visible_count">
                    </div>
                </template>
                <template v-else-if="column.id === 'summary'">
                    <div class="s-options-list">
                        <div class="s-option-wrapper">
                            <label class="flexbox space-8">
                                <span class="s-radio">
                                    <component-radio v-model="settings.display"
                                                     v-bind:label="false"
                                                     v-bind:val="'text'"
                                                     v-bind:name="column.id + '-radio-option'"></component-radio></span>
                                <span class="s-label">[`Show text with a dialog`]</span>
                            </label>
                        </div>
                        <div class="s-option-wrapper">
                            <label class="flexbox space-8">
                                <span class="s-radio">
                                    <component-radio v-model="settings.display"
                                                     v-bind:label="false"
                                                     v-bind:val="'textarea'"
                                                     v-bind:name="column.id + '-radio-option'"></component-radio></span>
                                <span class="s-label">[`Show a field for editing`]</span>
                            </label>
                        </div>
                    </div>
                </template>
                <template v-else-if="['price', 'compare_price', 'purchase_price', 'base_price'].indexOf(column.id) >= 0">
                    <div class="s-options-list">
                        <div class="s-option-wrapper">
                            <label class="flexbox space-8">
                                <span class="s-radio">
                                    <component-radio v-model="settings.format"
                                                     v-bind:label="false"
                                                     v-bind:val="'int'"
                                                     v-bind:name="column.id + '-radio-option'"></component-radio></span>
                                <span class="s-label">[`only the integer part`]</span>
                            </label>
                        </div>
                        <div class="s-option-wrapper">
                            <label class="flexbox space-8">
                                <span class="s-radio">
                                    <component-radio v-model="settings.format"
                                                     v-bind:label="false"
                                                     v-bind:val="'float'"
                                                     v-bind:name="column.id + '-radio-option'"></component-radio></span>
                                <span class="s-label">[`the integer part and two decimal digits`]</span>
                            </label>
                        </div>
                        <div class="s-option-wrapper">
                            <label class="flexbox space-8">
                                <span class="s-radio">
                                    <component-radio v-model="settings.format"
                                                     v-bind:label="false"
                                                     v-bind:val="'origin'"
                                                     v-bind:name="column.id + '-radio-option'"></component-radio></span>
                                <span class="s-label">[`precise number`]</span>
                            </label>
                        </div>
                    </div>
                </template>
            </div>
        </template>
    </div>
{/capture}
{$_components["component-list-column-item"] = $_component_list_column_item|strip}

{capture assign="_component_search_column"}
    <div class="s-search-section flexbox space-8">
        <div class="s-field-wrapper wide">
            <input class="s-field" placeholder="[`Search`]" v-model="search_string" v-on:input="search">
        </div>
        <template v-if="search_string.length">
            <div class="s-actions-wrapper flexbox space-8">
                <div class="s-action is-active"
                     v-on:click.prevent="revert">
                    <span class="s-icon icon size-14"><i class="fas fa-times"></i></span>
                </div>
            </div>
        </template>
    </div>
{/capture}
{$_components["component-search-column"] = $_component_search_column|strip}