{block name='et-product-list-filter-left'}
    {$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'}
    {$isEtAjaxFilter=$isEtAjaxFilter|default:false}
    {$categoryTreeMaxLevel=$categoryTreeMaxLevel|default:3}
    {$categoryTreeMoreChildrenLimit=$categoryTreeMoreChildrenLimit|default:[]}
    {et_isShopVersionAtLeast value="5.2.0-beta" assign='shopIsAtLeast52'}
    <div class="row et-product-list-filter-left{if $filtersActive} et-filters-active{/if}" 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='left'}
            {/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">
                {assign var="filterStyle" value=$filterStyle|default:'open'}
                {assign var="categoryTreePosition" value=$categoryTreePosition|default:'none'}
                {if $categoryTreePosition === 'beforeFilters' || $categoryTreePosition === 'alwaysLeft'}
                    {block name="et-product-list-filter-left-category-tree-before-filters"}
                        <div class="col-12">
                            <div class="et-product-list-filter-category-tree before-filters">
                                {include file='snippets/categories_mega.tpl'
                                    autoScrollTarget=$autoScrollTarget
                                    activeOnly=$categoryTreeActiveOnly
                                    maxLevel=$categoryTreeMaxLevel
                                    categoryTreeMoreChildrenLimit=$categoryTreeMoreChildrenLimit
                                }
                            </div>
                        </div>
                    {/block}
                {/if}
                <div class="col-12">
                    <div class="et-product-list-filter-header">
                        <div class="et-product-list-filter-total">
                            {$Suchergebnisse->getProductCount()} {lang key="products" section="global"}
                        </div>
                        <div class="et-product-list-filter-actions">
                            {block name='et-product-list-filter-sort'}
                                <div class="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}
                            {block name='et-product-list-filter-productsperpage'}
                                <div class="et-product-list-filter-item">
                                    <div class="dropdown et-product-list-filter-productsperpage filter-type-FilterItemLimits">
                                        <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='productsPerPage' 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->getLimitOptions() 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($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 row">
                                        <div class="col-6">
                                            {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="link-discreet ed gallery{if $oErweiterteDarstellung->nDarstellung === $smarty.const.ERWDARSTELLUNG_ANSICHT_GALERIE} active{/if}"
                                                   role="button"
                                                   title="{lang key='gallery' section='productOverview'}"
                                                   aria-label="{lang key='gallery' section='productOverview'}"
                                                >
                                                    <i class="{et_getIcon key="gallery"}"></i> {lang key='gallery' section='productOverview'}
                                                </a>
                                            {/block}
                                        </div>
                                        <div class="col-6">
                                            {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="link-discreet ed list{if $oErweiterteDarstellung->nDarstellung === $smarty.const.ERWDARSTELLUNG_ANSICHT_LISTE} active{/if}"
                                                   role="button"
                                                   title="{lang key='list' section='productOverview'}"
                                                   aria-label="{lang key='list' section='productOverview'}"
                                                >
                                                    <i class="{et_getIcon key="list"}"></i> {lang key='list' section='productOverview'}
                                                </a>
                                            {/block}
                                        </div>
                                    </div>
                                {/block}
                            {/if}
                        </div>
                    </div>
                </div>
                {block name="et-product-list-filter-ajax-button-before"}
                    {if ($filterMode === 'click' || $filterModeMobile === 'click') && $isEtAjaxFilter}
                        {* The upper button is only displayed after performing filtering *}
                        <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="btn-block 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}
                {block name='et-product-list-filter-top-active-filters'}
                    <div class="col-12 et-product-list-filter-active-filters">
                        {include file='snippets/filter/active_filter.tpl' showTitle=true autoScrollTarget=$autoScrollTarget}
                    </div>
                {/block}
                <div class="col-12 et-product-list-filter-filters">
                    {opcMountPoint id='opc_before_result_options_left'}
                    <div class="row">
                        {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='left'}
                        {/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-12 et-product-list-filter-item">
                                                        {block name='et-product-list-filter-characteristic'}
                                                            <div class="et-product-list-filter-characteristic">
                                                                <div class="et-collapse{if $filter->isActive()} active{/if}" data-toggle="collapse" role="button" aria-expanded="{if $filter->isActive() || $filterStyle === 'open'}true{else}false{/if}" data-target="#filter-collapse-{$subFilter->getFrontendName()|@seofy}" aria-controls="filter-collapse-{$subFilter->getFrontendName()|@seofy}">
                                                                    <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="collapseOpen"} et-collapse-open'></i>
                                                                    <i class='{et_getIcon key="collapseClosed"} et-collapse-closed'></i>
                                                                </div>
                                                                <div id="filter-collapse-{$subFilter->getFrontendName()|@seofy}" class="collapse{if $subFilter->isActive() || $filterStyle === 'open'} show{/if}">
                                                                    {if ($subFilter->getData('cTyp') === 'SELECTBOX') && $subFilter->getOptions() !== null && count($subFilter->getOptions()) > 0}
                                                                        <div class="dropdown">
                                                                            <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">{lang key='selectFilter' 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{if $filter->isActive()} active{/if}">
                                                                                {include file='snippets/filter/characteristic.tpl' Merkmal=$subFilter sub=true autoScrollTarget=$autoScrollTarget lazyLoadImages=$lazyLoadImages}
                                                                            </div>
                                                                        </div>
                                                                    {else}
                                                                        {include file='snippets/filter/characteristic.tpl' Merkmal=$subFilter sub=true autoScrollTarget=$autoScrollTarget lazyLoadImages=$lazyLoadImages}
                                                                    {/if}
                                                                </div>
                                                            </div>
                                                        {/block}
                                                    </div>
                                                {/if}
                                            {/foreach}
                                        {elseif count($filter->getOptions()) > 0 && !$isUselessFilter}
                                            <div class="col-12 et-product-list-filter-item">
                                                {if $filter->getClassName() === "JTL\Filter\Items\PriceRange"}
                                                    {block name='et-product-list-filter-price-range'}
                                                        <div class="et-product-list-filter-price-range">
                                                            <div class="et-collapse{if $filter->isActive()} active{/if}" data-toggle="collapse" role="button" aria-expanded="{if $filter->isActive() || $filterStyle === 'open'}true{else}false{/if}" data-target="#filter-collapse-{$filter->getFrontendName()|@seofy}" aria-controls="filter-collapse-{$filter->getFrontendName()|@seofy}">
                                                                <span class="text-truncate">{$filter->getFrontendName()}</span>
                                                                <i class='{et_getIcon key="collapseOpen"} et-collapse-open'></i>
                                                                <i class='{et_getIcon key="collapseClosed"} et-collapse-closed'></i>
                                                            </div>
                                                            <div id="filter-collapse-{$filter->getFrontendName()|@seofy}" class="collapse{if $filter->isActive() || $filterStyle === 'open'} show{/if} js-price-range-box">
                                                                {block name='snippets-filter-mobile-include-price-slider'}
                                                                    <div class="filter-item">
                                                                        {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}
                                                                    </div>
                                                                {/block}
                                                            </div>
                                                        </div>
                                                    {/block}
                                                {elseif $filter->getClassName() === "JTL\Filter\Items\Search"}
                                                    {block name='et-product-list-filter-search'}
                                                        <div class="et-product-list-filter-search">
                                                            <div class="et-collapse{if $filter->isActive()} active{/if}" data-toggle="collapse" role="button" aria-expanded="{if $filter->isActive() || $filterStyle === 'open'}true{else}false{/if}" data-target="#filter-collapse-{$filter->getFrontendName()|@seofy}" aria-controls="filter-collapse-{$filter->getFrontendName()|@seofy}">
                                                                <span class="text-truncate">{$filter->getFrontendName()}</span>
                                                                <i class='{et_getIcon key="collapseOpen"} et-collapse-open'></i>
                                                                <i class='{et_getIcon key="collapseClosed"} et-collapse-closed'></i>
                                                            </div>
                                                            <div id="filter-collapse-{$filter->getFrontendName()|@seofy}" class="collapse{if $filter->isActive() || $filterStyle === 'open'} show{/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="et-product-list-filter-manufacturer">
                                                            <div class="et-collapse{if $filter->isActive()} active{/if}" data-toggle="collapse" role="button" aria-expanded="{if $filter->isActive() || $filterStyle === 'open'}true{else}false{/if}" data-target="#filter-collapse-{$filter->getFrontendName()|@seofy}" aria-controls="filter-collapse-{$filter->getFrontendName()|@seofy}">
                                                                <span class="text-truncate">{$filter->getFrontendName()}</span>
                                                                <i class='{et_getIcon key="collapseOpen"} et-collapse-open'></i>
                                                                <i class='{et_getIcon key="collapseClosed"} et-collapse-closed'></i>
                                                            </div>
                                                            <div id="filter-collapse-{$filter->getFrontendName()|@seofy}" class="collapse{if $filter->isActive() || $filterStyle === 'open'} show{/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="et-product-list-filter-generic">
                                                            <div class="et-collapse{if $filter->isActive()} active{/if}" data-toggle="collapse" role="button" aria-expanded="{if $filter->isActive() || $filterStyle === 'open'}true{else}false{/if}" data-target="#filter-collapse-{$filter->getFrontendName()|@seofy}" aria-controls="filter-collapse-{$filter->getFrontendName()|@seofy}">
                                                                <span class="text-truncate">{$filter->getFrontendName()}</span>
                                                                <i class='{et_getIcon key="collapseOpen"} et-collapse-open'></i>
                                                                <i class='{et_getIcon key="collapseClosed"} et-collapse-closed'></i>
                                                            </div>
                                                            <div id="filter-collapse-{$filter->getFrontendName()|@seofy}" class="collapse{if $filter->isActive() || $filterStyle === 'open'} show{/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}
                    </div>
                </div>
                {block name="et-product-list-filter-ajax-button-after"}
                    {if $filterMode === 'click' || $filterModeMobile === 'click'}
                        {* Note: Only the visibility of this element (the contained button) controls if ajax filtering is performed or not! *}
                        {* The lower button is always displayed when ajax filtering is active. *}
                        <div class="eet-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="btn-block 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}
                {if $categoryTreePosition === 'afterFilters'}
                    {block name="et-product-list-filter-left-category-tree-after-filters"}
                        <div class="col-12">
                            <div class="et-product-list-filter-category-tree after-filters">
                                {include file='snippets/categories_mega.tpl'
                                    autoScrollTarget=$autoScrollTarget
                                    activeOnly=$categoryTreeActiveOnly
                                    maxLevel=$categoryTreeMaxLevel
                                    categoryTreeMoreChildrenLimit=$categoryTreeMoreChildrenLimit
                                }
                            </div>
                        </div>
                    {/block}
                {/if}
            </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}