{block name='snippets-filter-mobile'}
    {$autoScrollTarget=$autoScrollTarget|default:''}
    {if $isMobile && !$isTablet}
        <span class="h2 snippets-filter-mobile-heading" id="productlist-filter">{lang key='filterAndSort'}</span>
    {/if}
    <div class="productlist-filter-wrapper dropdown-full-width">
        {block name='snippets-filter-mobile-top-include-active-filter'}
            <div class="productlist-applied-filter productlist-applied-filter-top">
                {include file='snippets/filter/active_filter.tpl' autoScrollTarget=$autoScrollTarget}
            </div>
        {/block}
        <ul class="productlist-filter-accordion border-md-bottom border-lg-bottom-0">
        {block name='snippets-filter-mobile-sorting'}
            {if count($Suchergebnisse->getSortingOptions()) > 0}
                <li class="snippets-filter-mobile-sorting">
                    <a class="snippets-filter-mobile-sorting-link filter-type-FilterItemSort"
                        href="#"
                        data-toggle="collapse"
                        data-target="#sorting-collapse"
                        aria-controls="sorting-collapse"
                        aria-expanded="false"
                        rel="nofollow"
                    >
                        {lang key='sorting' section='productOverview'}
                        <span class="font-italic text-truncate">
                            {foreach $Suchergebnisse->getSortingOptions() as $option}
                                {if $option->isActive()} {$option->getName()}{/if}
                            {/foreach}
                        </span>
                    </a>
                    <div id="sorting-collapse" class="collapse snippets-filter-mobile-sorting-collapse">
                        {foreach $Suchergebnisse->getSortingOptions() as $option}
                            <a href="{$option->getURL()}{if !empty($autoScrollTarget)}{$autoScrollTarget}{/if}" rel="nofollow" target="_self" class="dropdown-item filter-item {if $option->isActive()}active{/if}">
                                {$option->getName()}
                            </a>
                        {/foreach}
                    </div>
                </li>
            {/if}
        {/block}
        {if $show_filters}
            {if count($NaviFilter->getAvailableContentFilters()) > 0}
                {block name='snippets-filter-mobile-filters'}
                    {foreach $NaviFilter->getAvailableContentFilters() as $filter}
                        {if count($filter->getFilterCollection()) > 0}
                            {foreach $filter->getOptions() as $subFilter}
                                {if $subFilter->getVisibility() !== \JTL\Filter\Visibility::SHOW_NEVER
                                    && $subFilter->getVisibility() !== \JTL\Filter\Visibility::SHOW_BOX
                                    && count($filter->getOptions()) > 0}
                                    <li class="snippets-filter-mobile-item">
                                        {block name='snippets-filter-mobile-filters-button'}
                                            <a href="#" class="collapsed"
                                                data-toggle="collapse"
                                                data-target="#filter-collapse-{$subFilter->getFrontendName()|seofy}"
                                                aria-controls="filter-collapse-{$subFilter->getFrontendName()|seofy}"
                                                aria-expanded="{if $subFilter->isActive()}true{else}false{/if}"
                                                rel="nofollow"
                                            >
                                                <span class="characteristic-collapse-btn-inner 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>
                                            </a>
                                        {/block}
                                        {block name='snippets-filter-mobile-filters-collapse'}
                                            <div id="filter-collapse-{$subFilter->getFrontendName()|seofy}"
                                                class="collapse snippets-filter-mobile-item-collapse{if $subFilter->isActive()} show{/if}"
                                            >
                                                {if ($subFilter->getData('cTyp') === 'SELECTBOX') && $subFilter->getOptions() !== null && count($subFilter->getOptions()) > 0}
                                                    <div class="dropdown">
                                                        <button class="btn btn-secondary dropdown-toggle btn-block" type="button"
                                                            data-toggle="dropdown"
                                                            aria-haspopup="true"
                                                            aria-expanded="false">
                                                            {lang key='selectFilter' section='global'}
                                                        </button>

                                                        <div class="dropdown-menu">
                                                            {include file='snippets/filter/characteristic.tpl' Merkmal=$subFilter sub=true autoScrollTarget=$autoScrollTarget}
                                                        </div>
                                                    </div>
                                                {else}
                                                    {include file='snippets/filter/characteristic.tpl' Merkmal=$subFilter sub=true autoScrollTarget=$autoScrollTarget}
                                                {/if}
                                            </div>
                                        {/block}
                                    </li>
                                {/if}
                            {/foreach}
                        {elseif count($filter->getOptions()) > 0}
                            <li class="snippets-filter-mobile-item">
                                {if $filter->getClassName() === "JTL\Filter\Items\PriceRange"}
                                    {block name='snippets-filter-mobile-filters-price-range'}
                                        <a href="#" class="collapsed"
                                            data-toggle="collapse"
                                            data-target="#filter-collapse-{$filter->getFrontendName()|seofy}"
                                            aria-expanded="true"
                                            aria-controls="filter-collapse-{$filter->getFrontendName()|seofy}"
                                            rel="nofollow"
                                        >
                                            {$filter->getFrontendName()}
                                        </a>
                                        <div id="filter-collapse-{$filter->getFrontendName()|seofy}"
                                            class="collapse show snippets-filter-mobile-item-collapse"
                                        >
                                            {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>
                                    {/block}
                                {elseif $filter->getClassName() === "JTL\Filter\Items\Search"}
                                    {block name='snippets-filter-mobile-filters-search'}
                                        <a href="#" class="collapsed"
                                            data-toggle="collapse"
                                            data-target="#filter-collapse-{$filter->getFrontendName()|seofy}"
                                            aria-expanded="{if $filter->isActive()}true{else}false{/if}"
                                            aria-controls="filter-collapse-{$filter->getFrontendName()|seofy}"
                                            rel="nofollow"
                                        >
                                            {$filter->getFrontendName()}
                                        </a>
                                        <div id="filter-collapse-{$filter->getFrontendName()|seofy}"
                                            class="collapse{if $filter->isActive()} show{/if} snippets-filter-mobile-item-collapse"
                                        >
                                            {block name='snippets-filter-mobile-include-search'}
                                                {include file='snippets/filter/search.tpl' autoScrollTarget=$autoScrollTarget}
                                            {/block}
                                        </div>
                                    {/block}
                                {elseif $filter->getClassName() === "JTL\Filter\Items\Manufacturer"}
                                    {block name='snippets-filter-mobile-filters-manufacturer'}
                                        <a href="#" class="collapsed"
                                            data-toggle="collapse"
                                            data-target="#filter-collapse-{$filter->getFrontendName()|seofy}"
                                            aria-expanded="{if $filter->isActive()}true{else}false{/if}"
                                            aria-controls="filter-collapse-{$filter->getFrontendName()|seofy}"
                                            rel="nofollow"
                                        >
                                            <span class="text-truncate">{$filter->getFrontendName()}</span>
                                        </a>
                                        <div id="filter-collapse-{$filter->getFrontendName()|seofy}"
                                            class="collapse{if $filter->isActive()} show{/if} snippets-filter-mobile-item-collapse"
                                        >
                                            {block name='snippets-filter-mobile-include-manufacturer'}
                                                {include file='snippets/filter/manufacturer.tpl' autoScrollTarget=$autoScrollTarget}
                                            {/block}
                                        </div>
                                    {/block}
                                {elseif count($filter->getOptions()) > 0}
                                    {block name='snippets-filter-mobile-filters-generic'}
                                        <a href="#" rel="nofollow"
                                            data-toggle="collapse"
                                            data-target="#filter-collapse-{$filter->getFrontendName()|seofy}"
                                            aria-expanded="{if $filter->isActive()}true{else}false{/if}"
                                            aria-controls="filter-collapse-{$filter->getFrontendName()|seofy}"
                                        >
                                            <span class="text-truncate">{$filter->getFrontendName()}</span>
                                        </a>
                                        <div id="filter-collapse-{$filter->getFrontendName()|seofy}"
                                            class="collapse{if $filter->isActive()} show{/if} snippets-filter-mobile-item-collapse"
                                        >
                                            {block name='snippets-filter-mobile-include-generic-filter-item'}
                                                {include file='snippets/filter/genericFilterItem.tpl' filter=$filter autoScrollTarget=$autoScrollTarget}
                                            {/block}
                                        </div>
                                    {/block}
                                {/if}
                            </li>
                        {/if}
                    {/foreach}
                {/block}
            {/if}
        {/if}
        </ul>
        {block name='snippets-filter-mobile-include-active-filter'}
            <div class="productlist-applied-filter">
                {include file='snippets/filter/active_filter.tpl' autoScrollTarget=$autoScrollTarget}
            </div>
        {/block}
    </div>
    {block name='snippets-filter-mobile-footer-buttons'}
        <div class="productlist-filter-footer">
            <div class="form-row snippets-filter-mobile-buttons">
                <div class="col">
                    <a class="btn btn-block btn-primary no-caret"
                        data-toggle='collapse'
                        data-dismiss='modal'
                        href="#collapseFilter"
                        aria-expanded='true'
                        aria-controls='collapseFilter'
                    >
                        {lang key='filterCancel'}
                    </a>
                </div>
                <div class="col">
                    {include file="widgets/base/button.tpl" id="submitMobileFilters" variant="primary" classes="btn-block min-w-sm text-nowrap-util" href="{$NaviFilter->getFilterURL()->getURL()}" title="{lang key='filterShowItem' printf=$itemCount}" label="{lang key='filterShowItem' printf=$itemCount}"}
                </div>
            </div>
        </div>
    {/block}
    {block name='snippets-filter-mobile-js-helpers'}
        <div class="js-helpers">
            <input id="js-price-redirect" type="hidden" value="1" />
        </div>
    {/block}
    {block name='snippets-filter-mobile-scripts'}
        {inline_script}<script>
            {literal}
                $('.js-collapse-filter .filter-item, .js-collapse-filter .js-filter-item').on('click', function(e) {
                    e.preventDefault();
                    let prgHref = $(this).data('prg-href');
                    prgHref = prgHref ? atob(prgHref) : null;
                    $.evo.initFilters(prgHref ?? $(this).attr('href'));
                });
            {/literal}
        </script>{/inline_script}
    {/block}
{/block}
