{capture assign="_component_table_filters"}
<div class="s-table-filters-section">
    {* PANE *}
    <div class="s-pane-section">
        {* Categories — mobile only *}
        <button type="button" class="mobile-only button nobutton custom-m-0 large" style="color: var(--text-color);" @click="$emit('showCategories')"><i class="fas fa-bars"></i></button>
        {* SEARCH *}
        <component-table-product-search class="s-filter-search-section s-pane-item wide"
                                        v-model="search_string"
                                        v-on:search_change="applySearch"></component-table-product-search>

        {* STOREFRONTS *}
        <component-table-filters-storefronts v-on:success="applyStorefronts"></component-table-filters-storefronts>

        {* TAGS *}
        <component-table-filters-tags v-on:success="applyTags"></component-table-filters-tags>

        {* FEATURES *}
        <component-table-filters-features v-on:success="applyFeatures"></component-table-filters-features>

        {* OTHER *}
        <component-table-filters-list></component-table-filters-list>
    </div>

    {* RULES *}
    <component-table-filters-rules></component-table-filters-rules>
</div>
{/capture}
{$_components["component-table-filters"] = $_component_table_filters|strip}

{capture assign="_component_table_filters_search"}
    <div class="component-table-filters-search flexbox space-4">
        <div class="s-icon" v-if="prop_search_icon">
            <span class="icon"><i class="fas fa-search"></i></span>
        </div>
        <div class="s-field-wrapper">
            <component-input class="s-field js-autofocus"
                             v-bind:model-value="modelValue"
                             v-on:input="onInput"
                             v-on:change="onChange"
                             v-bind:cancel="true"
                             v-bind:placeholder="(placeholder ? placeholder : '{_w("Search")|escape}')"></component-input>
        </div>
        <template v-if="modelValue.length">
            <div class="s-actions-wrapper flexbox middle">
                <div class="s-action is-active cursor-pointer"
                     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-table-filters-search"] = $_component_table_filters_search|strip}

{capture assign="_component_table_product_search"}
{literal}
    <div class="component-table-filters-search flexbox middle space-8">
        <span class="icon"><i class="fas fa-search"></i></span>
        <div class="s-field-wrapper wide">
            <component-input class="s-field js-autocomplete"
                             v-bind:model-value="modelValue"
                             v-on:input="onInput"
                             v-bind:cancel="true"
                             v-bind:placeholder="(placeholder ? placeholder : '[`Search`]')"></component-input>
        </div>
        <template v-if="modelValue.length && states.show_reset">
            <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>
{/literal}
{/capture}
{$_components["component-table-product-search"] = $_component_table_product_search|strip}

{capture assign="_template_autocomplete_product"}
    <div class="s-item-product-wrapper flexbox space-4">
        <div>
            <span class="s-image">
                <span class="s-icon icon size-18"><svg><use xlink:href='{$_sprite_url}#empty-image-2'></use></svg></span>
            </span>
        </div>
        <div class="middle">
            <span class="s-name">%name%</span>
            <span class="s-ident">id:%id%</span>
        </div>
    </div>
{/capture}
{$_templates["autocomplete-product"] = $_template_autocomplete_product|strip}

{capture assign="_template_autocomplete_product_with_image"}
    <div class="s-item-product-wrapper flexbox space-4">
        <div>
            <span class="s-image" style="background-image: url('%image_url%');"></span>
        </div>
        <div class="middle">
            <span class="s-name">%name%</span>
            <span class="s-ident">id:%id%</span>
        </div>
    </div>
{/capture}
{$_templates["autocomplete-product-with-image"] = $_template_autocomplete_product_with_image|strip}

{capture assign="_template_autocomplete_product_empty"}
    <div class="s-item-product-wrapper">
        <div>
            <span class="s-name">%name%</span>
        </div>
    </div>
{/capture}
{$_templates["autocomplete-product-empty"] = $_template_autocomplete_product_empty|strip}

{include file="./filters.categories.html" scope="parent" inline}
{include file="./filters.storefronts.html" scope="parent" inline}
{include file="./filters.tags.html" scope="parent" inline}
{include file="./filters.features.html" scope="parent" inline}
{include file="./filters.list.html" scope="parent" inline}
{include file="./filters.rules.html" scope="parent" inline}
{include file="../../dialogs/list.feature_value.html" scope="parent" inline}