{capture assign="_component_table_filters_result"}
<div class="s-result-section" v-if="result_filters.length">
    <div class="flexbox space-16">
        <div class="flexbox space-12 nowrap">
            <div class="s-count-wrapper">
                <span class="s-count bold">{_w("%d product found.", "%d products found.", $products_total_count)}</span>
            </div>
            <div class="s-reset-wrapper">
                <span class="link" v-on:click="resetFilters" v-if="formatted_filters.length">[`Clear filters`]</span>
            </div>
        </div>
        <template v-if="formatted_filters.length">
            <div class="s-filters-list js-filters-list">
                <template v-for="group in visible_filters">
                    <component-table-filters-rules-item
                        v-bind:group="group"
                        v-on:remove_group="removeGroup"></component-table-filters-rules-item>
                </template>
            </div>
            <div class="s-dropdown-filters" v-bind:style="{ 'visibility' : (!invisible_filters.length ? 'hidden' : '') }">
                <div class="dropdown js-dropdown">
                    <div class="dropdown-toggle nowrap link cursor-pointer">
                        <span class="s-name">+ { { invisible_filters.length } }</span>
                    </div>
                    <div class="dropdown-body">
                        <template v-for="group in invisible_filters">
                            <component-table-filters-rules-item
                                v-bind:group="group"
                                v-on:remove_group="removeDropdownGroup"></component-table-filters-rules-item>
                        </template>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>
{/capture}
{$_components["component-table-filters-rules"] = $_component_table_filters_result|strip}

{capture assign="_component_table_filters_result_item"}
<div class="s-filter-item-wrapper">
    <div class="flexbox space-4">
        <div class="s-icon-wrapper">
            <template v-if="group.type === 'categories'">
                <span class="s-icon icon size-18 shift-2 text-light-gray" v-bind:key="'fa-folder-dynamic'" v-if="is_folder_dynamic"><svg><use xlink:href="{$_sprite_url}#folder-dynamic"></use></svg></span>
                <span class="s-icon icon shift-0 text-light-gray" v-bind:key="'fa-folder'" v-else><i class="fas fa-folder"></i></span>
            </template>
            <template v-else-if="group.type === 'sets'">
                <span class="s-icon icon shift-0 text-light-gray" v-if="is_list_dynamic"><svg><use xlink:href="{$_sprite_url}#list-auto"></use></svg></span>
                <span class="s-icon icon shift-0 text-light-gray" v-else=""><svg><use xlink:href="{$_sprite_url}#list"></use></svg></span>
            </template>
            <span class="s-icon icon shift-0 text-light-gray" v-else-if="group.type === 'storefronts'"><i class="fas fa-store"></i></span>
            <span class="s-icon icon shift-0 text-light-gray" v-else-if="group.type === 'tags'"><i class="fas fa-tag"></i></span>
            <span class="s-icon icon shift-0 text-light-gray" v-else-if="group.type === 'types'"><i class="fas fa-cube"></i></span>
            <template v-else-if="feature_data">
                <span class="s-icon icon shift-0 text-gray" v-if="feature_data.available_for_sku"><svg><use xlink:href='{$_sprite_url}#sitemap'></use></svg></span>
                <span class="s-icon icon shift-0 text-light-gray" v-else><svg><use xlink:href='{$_sprite_url}#sitemap-slash'></use></svg></span>
            </template>
        </div>
        <div class="s-name-wrapper" v-bind:title="name_tooltip">
            <template v-if="label">
                <span class="s-label">{ { label } }<span v-if="names.length > 0">:</span></span>
            </template>
            <template v-if="names.length > 1">
                <template v-for="name in names">
                    <span class="s-name" v-html="name"></span>
                </template>
            </template>
            <template v-else>
                <span class="s-name" v-html="names[0]" v-if="names[0]"></span>
            </template>
        </div>
        <div class="s-action-wrapper">
            <span class="s-icon icon shift-0 cursor-pointer" v-on:click="remove(group)"><i class="fas fa-times"></i></span>
        </div>
    </div>
</div>
{/capture}
{$_components["component-table-filters-rules-item"] = $_component_table_filters_result_item|strip}