{block name='et-product-list-filter-top'}
    {$styleActive = $styleActive|default:'gallery'}
    {$autoScrollTarget=$autoScrollTarget|default: ''}
    {$hideUselessFilters=$hideUselessFilters|default:false}
    {$categoryTreeActiveOnly=$categoryTreeActiveOnly|default:false}
    {$lazyLoadImages=$lazyLoadImages|default:true}
    {$filterMode=$filterMode|default:'immediate'}
    {$filterModeMobile=$filterModeMobile|default:'immediate'}
    {$filterDisplayMobile=$filterDisplayMobile|default:'collapse'}
    {$filterModalPosition=$filterModalPosition|default:'center'}
    {$sortingDisplayMobile=$sortingDisplayMobile|default:'withFilters'}
    {$sortingModalPosition=$sortingModalPosition|default:'center'}
    {$categoryTreeMaxLevel=$categoryTreeMaxLevel|default:3}
    {$categoryTreeMoreChildrenLimit=$categoryTreeMoreChildrenLimit|default:[]}
    {$isEtAjaxFilter=$isEtAjaxFilter|default:false}
    {et_isShopVersionAtLeast value="5.2.0-beta" assign='shopIsAtLeast52'}
    <div class="row et-product-list-filter-top{if $filtersActive} et-filters-active{/if}" data-more-filters-limit='{json_encode($moreFiltersLimit)}' id="et-product-list-collapse-parent">
        {if !$isEtAjaxFilter}
            {block name="et-product-list-filter-sorting-buttons-wrapper"}
                {* Mobile triggers for filters and sorting *}
                {include file='widgets/snippets/product_list_filter_sorting_buttons.tpl'
                filterDisplayMobile=$filterDisplayMobile
                sortingDisplayMobile=$sortingDisplayMobile
                filterPosition='top'}
            {/block}
        {/if}
        <div id="et-product-list-filter-collapse-content-mobile" class="col-12 et-product-list-filter-collapse-content-mobile collapse{if ($filterDisplayMobile !== 'modal' && $filtersActive) || $isEtAjaxFilter} show{/if}" data-parent="#et-product-list-collapse-parent">
            <div class="row">
                <div class="col-12 et-product-list-filter-filters">
                    {assign var="categoryTreePosition" value=$categoryTreePosition|default:'none'}
                    {opcMountPoint id='opc_before_result_options'}
                    <div class="{block name="et-product-list-filter-top-filters-row-class"}row row-cols-{$filtersPerRow.xs} row-cols-sm-{$filtersPerRow.sm} row-cols-md-{$filtersPerRow.md} row-cols-lg-{$filtersPerRow.lg} row-cols-xl-{$filtersPerRow.xl}{/block}">
                        {if $categoryTreePosition === 'beforeFilters'}
                            {block name="et-product-list-filter-top-category-tree-before-filters"}
                                <div class="col et-product-list-filter-item">
                                    <div class="dropdown et-product-list-filter-category-tree">
                                        <button class="btn dropdown-toggle et-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="text-truncate">{lang key='categories' section='global'}</span>
                                            <i class='{et_getIcon key="dropdownOpen"} et-dropdown-open'></i>
                                            <i class='{et_getIcon key="dropdownClosed"} et-dropdown-closed'></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            {* Note that regular collapses do not work within dropdowns - so we force the category tree to be always open *}
                                            {include file='snippets/categories_mega.tpl'
                                                forceOpen=true
                                                autoScrollTarget=$autoScrollTarget
                                                activeOnly=$categoryTreeActiveOnly
                                                maxLevel=$categoryTreeMaxLevel
                                                categoryTreeMoreChildrenLimit=$categoryTreeMoreChildrenLimit
                                            }
                                        </div>
                                    </div>
                                </div>
                            {/block}
                        {/if}
                        {block name='et-product-list-filter-sort'}
                            <div class="col et-product-list-filter-item{if $sortingDisplayMobile !== 'withFilters'} et-product-list-sort-desktop-only{/if}">
                                <div class="dropdown et-product-list-filter-sort">
                                    <button class="btn dropdown-toggle et-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="text-truncate">{lang key='sorting' section='productOverview'}</span>
                                        <i class='{et_getIcon key="dropdownOpen"} et-dropdown-open'></i>
                                        <i class='{et_getIcon key="dropdownClosed"} et-dropdown-closed'></i>
                                    </button>
                                    <div class="dropdown-menu">
                                        {foreach $Suchergebnisse->getSortingOptions() as $option}
                                            <a href="{$option->getURL()}{if !empty($autoScrollTarget)}{$autoScrollTarget}{/if}" class="link-discreet dropdown-item {if $option->isActive()}active{/if}" title="{$option->getName()|escape:'html'}">{$option->getName()}</a>
                                        {/foreach}
                                    </div>
                                </div>
                            </div>
                        {/block}
                        {if isset($oExtendedJTLSearchResponse)}
                            {* This is a JTL Search result - it handles filters differently - see box_filter.tpl in JTL Search Plugin *}
                            {include file='widgets/snippets/jtl_search_filters.tpl' filterPosition='top'}
                        {/if}
                        {if count($NaviFilter->getSearchResults()->getProducts()) > 0}
                            {* The result_options.tpl does not seem to be of much use anymore - all it does is render a filter-button and a modal that will then load filters, but the loaded filters were computed beforehand, anyway; so whats the deal of loading them asynchronously? *}
                            {* {include file='productlist/result_options.tpl' itemCount=$Suchergebnisse->getProductCount() filterPlacement='collapse'} *}
                            {* FILTER AVAILABILITY *}
                            {* FILTER CATEGORY - note that this is NOT the same as the category tree *}
                            {* FILTER CHARACTERISTICS *}
                            {* FILTER MANUFACTURER *}
                            {* FILTER PRICERANGE *}
                            {* FILTER RATING *}
                            {* FILTER SEARCH *}
                            {* FILTER SEARCH SPECIAL *}
                            {if count($NaviFilter->getAvailableContentFilters()) > 0}
                                {block name='et-product-list-filter-filters'}
                                    {et_sortContentFilters filters=$NaviFilter->getAvailableContentFilters() order=$filterOrder assign='sortedContentFilters'}
                                    {foreach $sortedContentFilters as $filter}
                                        {if $hideUselessFilters}
                                            {et_isUselessFilter filter=$filter resultCount=$Suchergebnisse->getProductCount() assign="isUselessFilter"}
                                        {else}
                                            {$isUselessFilter=false}
                                        {/if}
                                        {if count($filter->getFilterCollection()) > 0}
                                            {foreach $filter->getOptions() as $subFilter}
                                                {if $hideUselessFilters}
                                                    {et_isUselessFilter filter=$subFilter resultCount=$Suchergebnisse->getProductCount() assign="isUselessSubfilter"}
                                                {else}
                                                    {$isUselessSubfilter=false}
                                                {/if}
                                                {if $subFilter->getVisibility() !== \JTL\Filter\Visibility::SHOW_NEVER && count($subFilter->getOptions()) > 0 && !$isUselessSubfilter}
                                                    <div class="col et-product-list-filter-item">
                                                        {block name='et-product-list-filter-characteristic'}
                                                            <div class="dropdown et-product-list-filter-characteristic">
                                                                <button class="btn dropdown-toggle et-dropdown-toggle{if $subFilter->isActive()} active{/if}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    <span class="text-truncate">{$img = $subFilter->getImage(\JTL\Media\Image::SIZE_XS)}
                                                                        {if $Einstellungen.navigationsfilter.merkmal_anzeigen_als !== 'T'
                                                                        && $img !== null
                                                                        && strpos($img, $smarty.const.BILD_KEIN_MERKMALBILD_VORHANDEN) === false
                                                                        && strpos($img, $smarty.const.BILD_KEIN_ARTIKELBILD_VORHANDEN) === false}
                                                                            {include file='snippets/image.tpl'
                                                                            item=$subFilter
                                                                            square=false
                                                                            class='img-xs'
                                                                            srcSize='xs'
                                                                            sizes='24px'}
                                                                        {/if}
                                                                        {if $Einstellungen.navigationsfilter.merkmal_anzeigen_als !== 'B'}
                                                                            {$subFilter->getFrontendName()}
                                                                        {/if}
                                                                    </span>
                                                                    <i class='{et_getIcon key="dropdownOpen"} et-dropdown-open'></i>
                                                                    <i class='{et_getIcon key="dropdownClosed"} et-dropdown-closed'></i>
                                                                </button>
                                                                <div class="dropdown-menu{if $filter->isActive()} active{/if}">
                                                                    {include file='snippets/filter/characteristic.tpl' Merkmal=$subFilter sub=true autoScrollTarget=$autoScrollTarget lazyLoadImages=$lazyLoadImages}
                                                                </div>
                                                            </div>
                                                        {/block}
                                                    </div>
                                                {/if}
                                            {/foreach}
                                        {elseif count($filter->getOptions()) > 0 && !$isUselessFilter}
                                            <div class="col et-product-list-filter-item">
                                                {if $filter->getClassName() === "JTL\Filter\Items\PriceRange"}
                                                    {block name='et-product-list-filter-price-range'}
                                                        <div class="dropdown et-product-list-filter-price-range">
                                                            <button class="btn dropdown-toggle et-dropdown-toggle{if $filter->isActive()} active{/if}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                <span class="text-truncate">{$filter->getFrontendName()}</span>
                                                                <i class='{et_getIcon key="dropdownOpen"} et-dropdown-open'></i>
                                                                <i class='{et_getIcon key="dropdownClosed"} et-dropdown-closed'></i>
                                                            </button>
                                                            <div class="dropdown-menu{if $filter->isActive()} active{/if} js-price-range-box">
                                                                {block name='snippets-filter-mobile-include-price-slider'}
                                                                    {input data=['id'=>'js-price-range-url'] type="hidden" value="{$NaviFilter->getFilterURL()->getURL()}"}
                                                                    {include file='snippets/filter/price_slider.tpl' id='price-slider-content' autoScrollTarget=$autoScrollTarget}
                                                                {/block}
                                                            </div>
                                                        </div>
                                                    {/block}
                                                {elseif $filter->getClassName() === "JTL\Filter\Items\Search"}
                                                    {block name='et-product-list-filter-search'}
                                                        <div class="dropdown et-product-list-filter-search">
                                                            <button class="btn dropdown-toggle et-dropdown-toggle{if $filter->isActive()} active{/if}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                <span class="text-truncate">{$filter->getFrontendName()}</span>
                                                                <i class='{et_getIcon key="dropdownOpen"} et-dropdown-open'></i>
                                                                <i class='{et_getIcon key="dropdownClosed"} et-dropdown-closed'></i>
                                                            </button>
                                                            <div class="dropdown-menu{if $filter->isActive()} active{/if}">
                                                                {block name='snippets-filter-mobile-include-search'}
                                                                    {include file='snippets/filter/search.tpl' autoScrollTarget=$autoScrollTarget}
                                                                {/block}
                                                            </div>
                                                        </div>
                                                    {/block}
                                                {elseif $filter->getClassName() === "JTL\Filter\Items\Manufacturer"}
                                                    {block name='et-product-list-filter-manufacturer'}
                                                        <div class="dropdown et-product-list-filter-manufacturer">
                                                            <button class="btn dropdown-toggle et-dropdown-toggle{if $filter->isActive()} active{/if}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                <span class="text-truncate">{$filter->getFrontendName()}</span>
                                                                <i class='{et_getIcon key="dropdownOpen"} et-dropdown-open'></i>
                                                                <i class='{et_getIcon key="dropdownClosed"} et-dropdown-closed'></i>
                                                            </button>
                                                            <div class="dropdown-menu{if $filter->isActive()} active{/if}">
                                                                {block name='snippets-filter-mobile-include-manufacturer'}
                                                                    {include file='snippets/filter/manufacturer.tpl' autoScrollTarget=$autoScrollTarget lazyLoadImages=$lazyLoadImages}
                                                                {/block}
                                                            </div>
                                                        </div>
                                                    {/block}
                                                {elseif count($filter->getOptions()) > 0}
                                                    {block name='et-product-list-filter-generic'}
                                                        <div class="dropdown et-product-list-filter-generic">
                                                            <button class="btn dropdown-toggle et-dropdown-toggle{if $filter->isActive()} active{/if}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                <span class="text-truncate">{$filter->getFrontendName()}</span>
                                                                <i class='{et_getIcon key="dropdownOpen"} et-dropdown-open'></i>
                                                                <i class='{et_getIcon key="dropdownClosed"} et-dropdown-closed'></i>
                                                            </button>
                                                            <div class="dropdown-menu{if $filter->isActive()} active{/if}">
                                                                {block name='snippets-filter-mobile-include-generic-filter-item'}
                                                                    {include file='snippets/filter/genericFilterItem.tpl' filter=$filter autoScrollTarget=$autoScrollTarget}
                                                                {/block}
                                                            </div>
                                                        </div>
                                                    {/block}
                                                {/if}
                                            </div>
                                        {/if}
                                    {/foreach}
                                {/block}
                            {/if}
                        {/if}
                        {if $categoryTreePosition === 'afterFilters'}
                            {block name="et-product-list-filter-top-category-tree-after-filters"}
                                <div class="col et-product-list-filter-item">
                                    <div class="dropdown et-product-list-filter-category-tree">
                                        <button class="btn dropdown-toggle et-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="text-truncate">{lang key='categories' section='global'}</span>
                                            <i class='{et_getIcon key="dropdownOpen"} et-dropdown-open'></i>
                                            <i class='{et_getIcon key="dropdownClosed"} et-dropdown-closed'></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            {* Note that regular collapses do not work within dropdowns - so we force the category tree to be always open *}
                                            {include file='snippets/categories_mega.tpl'
                                                forceOpen=true
                                                autoScrollTarget=$autoScrollTarget
                                                activeOnly=$categoryTreeActiveOnly
                                                maxLevel=$categoryTreeMaxLevel
                                                categoryTreeMoreChildrenLimit=$categoryTreeMoreChildrenLimit
                                            }
                                        </div>
                                    </div>
                                </div>
                            {/block}
                        {/if}
                        {block name="et-product-list-filter-more-trigger"}
                            <div class="col et-more-filters-trigger">
                                {* This element will be made visible by JS if needed *}
                                {include file="widgets/base/button.tpl" variant="secondary" type="button" classes="btn-block" label="<span class=\"text-truncate\">{lang key='more' section='global'}</span>"}
                            </div>
                        {/block}
                    </div>
                </div>
                <div class="col-12 et-product-list-filter-actions">
                    {block name='et-product-list-filter-top-active-filters'}
                        <div class="et-product-list-filter-active-filters">
                            {include file='snippets/filter/active_filter.tpl' autoScrollTarget=$autoScrollTarget}
                        </div>
                    {/block}
                    {block name='et-product-list-filter-productsperpage'}
                        <div class="et-product-list-filter-productsperpage filter-type-FilterItemLimits">
                            {* <span class="et-product-list-filter-title">{lang key='productsPerPage' section='productOverview'}</span> *}
                            {foreach $Suchergebnisse->getLimitOptions() as $option}
                                <a class="et-product-list-filter-nav-item{if $option->isActive()} active{/if}" rel="nofollow" href="{$option->getURL()}{if !empty($autoScrollTarget)}{$autoScrollTarget}{/if}">{$option->getName()}</a>
                            {/foreach}
                        </div>
                    {/block}
                    {if isset($oErweiterteDarstellung->nDarstellung)
                    && $Einstellungen.artikeluebersicht.artikeluebersicht_erw_darstellung === 'Y'
                    && (!$shopIsAtLeast52 && empty($AktuelleKategorie->categoryFunctionAttributes['darstellung']) || $shopIsAtLeast52 && empty($AktuelleKategorie->getCategoryFunctionAttribute('darstellung')))}
                        {block name='et-product-list-filter-layout'}
                            <div class="et-product-list-filter-layout">
                                {block name='et-product-list-filter-layout-gallery'}
                                    <a href="{$oErweiterteDarstellung->cURL_arr[$smarty.const.ERWDARSTELLUNG_ANSICHT_GALERIE]}{if !empty($autoScrollTarget)}{$autoScrollTarget}{/if}"
                                       id="ed_gallery"
                                       class="ed gallery{if $styleActive === 'gallery'} active{/if}"
                                       role="button"
                                       title="{lang key='gallery' section='productOverview'}"
                                       aria-label="{lang key='gallery' section='productOverview'}"
                                    >
                                        <i class="{et_getIcon key="gallery"}"></i>
                                    </a>
                                {/block}
                                {block name='et-product-list-filter-layout-list'}
                                    <a href="{$oErweiterteDarstellung->cURL_arr[$smarty.const.ERWDARSTELLUNG_ANSICHT_LISTE]}{if !empty($autoScrollTarget)}{$autoScrollTarget}{/if}"
                                       id="ed_list"
                                       class="ed list{if $styleActive === 'list'} active{/if}"
                                       role="button"
                                       title="{lang key='list' section='productOverview'}"
                                       aria-label="{lang key='list' section='productOverview'}"
                                    >
                                        <i class="{et_getIcon key="list"}"></i>
                                    </a>
                                {/block}
                            </div>
                        {/block}
                    {/if}
                </div>
                {block name="et-product-list-filter-ajax-button"}
                    {if $filterMode === 'click' || $filterModeMobile === 'click'}
                        {* Note: Only the visibility of this element (the contained button) controls if ajax filtering is performed or not! *}
                        <div class="et-ajax-filter-apply-wrapper col-12{if $filterModeMobile === 'click'} d-flex{else} d-none{/if}{if $filterMode !== 'click'} d-lg-none{else} d-lg-flex{/if}">
                            {include file="widgets/base/button.tpl" variant="primary" classes="et-ajax-filter-apply{if !$isEtAjaxFilter} disabled{/if}" href="{$ShopURLSSL}{$smarty.server.REQUEST_URI}{if !empty($autoScrollTarget)}{$autoScrollTarget}{/if}" label="{lang key='filterGo'}<span class=\"et-ajax-filter-apply-spinner\"> <i class=\"{et_getIcon key="variationLoader"} et-icon-spin\"></i></span>{if isset($Suchergebnisse) && $isEtAjaxFilter}<span class=\"et-ajax-filter-apply-total\"> ({$Suchergebnisse->getProductCount()} {lang key="products" section="global"})</span>{/if}" iconPosition="left" icon="{et_getIcon key="filter"}"}
                        </div>
                    {/if}
                {/block}
            </div>
        </div>
        {if !$isEtAjaxFilter}
            {if $sortingDisplayMobile === 'collapse'}
                {block name='et-product-list-sorting-collapse-wrapper'}
                    {include file='widgets/snippets/product_list_sorting_collapse.tpl'}
                {/block}
            {elseif $sortingDisplayMobile === 'modal'}
                {block name='et-product-list-sorting-modal-wrapper'}
                    {include file='widgets/snippets/product_list_sorting_modal.tpl'
                    sortingModalPosition=$sortingModalPosition}
                {/block}
            {/if}
            {if $filterDisplayMobile === 'modal'}
                {block name='et-product-list-filter-modal-wrapper'}
                    {include file='widgets/snippets/product_list_filter_modal.tpl'
                    sortingDisplayMobile=$sortingDisplayMobile
                    filterModalPosition=$filterModalPosition}
                {/block}
            {/if}
        {/if}
    </div>
{/block}