{block name='snippets-filter-characteristic'}
    {et_isShopVersionAtLeast value="5.5.0-rc.1" assign='shopIsAtLeast55'}
    {et_isShopVersionAtLeast value="5.7.0-rc.3" assign='shopIsAtLeast57'}
    {$is_dropdown = ($Merkmal->cTyp === 'SELECTBOX')}
    {$limit = $limit|default:-1}
    {$collapseInit = false}
    {$showFilterCount = (!isset($Einstellungen.navigationsfilter.merkmalfilter_trefferanzahl_anzeigen) || $Einstellungen.navigationsfilter.merkmalfilter_trefferanzahl_anzeigen !== 'N') && !(isset($Einstellungen.navigationsfilter.merkmalfilter_trefferanzahl_anzeigen) && $Einstellungen.navigationsfilter.merkmalfilter_trefferanzahl_anzeigen === 'E' && $Merkmal->getData('isMultiSelect'))}
    {$autoScrollTarget=$autoScrollTarget|default:''}
    {$lazyLoadImages=$lazyLoadImages|default:true}
    {if $Merkmal->getData('cTyp') === 'BILD'}
        <ul class="nav nav-filter-has-image">
    {/if}
    {foreach $Merkmal->getOptions() as $attributeValue}
        {$attributeImageURL = null}
        {if ($Merkmal->getData('cTyp') === 'BILD' || $Merkmal->getData('cTyp') === 'BILD-TEXT')}
            {$attributeImageURL = $attributeValue->getImage(\JTL\Media\Image::SIZE_XS)}
            {if strpos($attributeImageURL, $smarty.const.BILD_KEIN_ARTIKELBILD_VORHANDEN) !== false
                || strpos($attributeImageURL, $smarty.const.BILD_KEIN_MERKMALWERTBILD_VORHANDEN) !== false}
                {$attributeImageURL = null}
            {/if}
        {/if}
        {if $is_dropdown}
            {block name='snippets-filter-characteristics-dropdown'}
                <a class="dropdown-item{if $attributeValue->isActive()} active{/if} nav-link filter-item"
                    target="_self"
                    href="{if !empty($attributeValue->getURL())}{$attributeValue->getURL()}{if !empty($autoScrollTarget)}{$autoScrollTarget}{/if}{else}#{/if}"
                    title="{if $Merkmal->getData('cTyp') === 'BILD'}{$attributeValue->getValue()|escape:'html'}{/if}"
                >
                    <div class="box-link-wrapper">
                        <i class="{if $attributeValue->isActive()}{et_getIcon key="filterActive"}{else}{et_getIcon key="filterInactive"}{/if} snippets-filter-item-icon-right"></i>
                        {if !empty($attributeImageURL)}
                            {image lazy=$lazyLoadImages webp=true
                                src=$attributeImageURL
                                alt=$attributeValue->getValue()|escape:'html'
                                class="vmiddle"
                            }
                        {/if}
                        <span class="et-filter-option-name filter-item-value">{$attributeValue->getValue()|escape:'html'}</span>
                        {if $showFilterCount}
                            <span class="badge badge-outline-secondary">{$attributeValue->getCount()}{if $shopIsAtLeast55}<span class="sr-only"> {lang key='productsFound'}</span>{/if}</span>
                        {/if}
                    </div>
                </a>
            {/block}
        {else}
            {if $limit != -1 && $attributeValue@iteration > $limit && !$collapseInit}
                {block name='snippets-filter-characteristics-more-top'}
                    <div class="collapse{if $Merkmal->isActive()} show{/if}" id="box-collps-filter-attribute-{$Merkmal->getValue()}">
                        <ul class="nav {if $Merkmal->getData('cTyp') !== 'BILD'}flex-column{/if}">
                    {$collapseInit = true}
                {/block}
            {/if}
            {block name='snippets-filter-characteristics-nav'}
                {if {$Merkmal->getData('cTyp')} === 'TEXT'}
                    {block name='snippets-filter-characteristics-nav-text'}
                        {$href = "{if !empty($attributeValue->getURL())}{$attributeValue->getURL()}{if !empty($autoScrollTarget)}{$autoScrollTarget}{/if}{else}#{/if}"}
                        <a class="nav-link {if $attributeValue->isActive()}active{/if} filter-item"
                            {if $shopIsAtLeast57 && $Einstellungen.prgpattern.prg_pattern_enabled !== 'N'}
                                data-prg-href="{$href|default:''|base64_encode}"
                                href="#"
                            {else}
                                href="{$href}"
                            {/if}
                            title="{$attributeValue->getValue()|escape:'html'}"
                            rel="nofollow"
                        >
                            <div class="box-link-wrapper">
                                <i class="{if $attributeValue->isActive()}{et_getIcon key="filterActive"}{else}{et_getIcon key="filterInactive"}{/if} snippets-filter-item-icon-right"></i>
                                {if !empty($attributeImageURL)}
                                    {image lazy=$lazyLoadImages webp=true
                                        src=$attributeImageURL
                                        alt=$attributeValue->getValue()|escape:'html'
                                        class="vmiddle"
                                    }
                                {/if}
                                <span class="et-filter-option-name filter-item-value">{$attributeValue->getValue()|escape:'html'}</span>
                                {if $showFilterCount}
                                    <span class="badge badge-outline-secondary">{$attributeValue->getCount()}{if $shopIsAtLeast55}<span class="sr-only"> {lang key='productsFound'}</span>{/if}</span>
                                {/if}
                            </div>
                        </a>
                    {/block}
                {elseif $Merkmal->getData('cTyp') === 'BILD' && $attributeImageURL !== null}
                    {block name='snippets-filter-characteristics-nav-image'}
                        {$href = "{if !empty($attributeValue->getURL())}{$attributeValue->getURL()}{if !empty($autoScrollTarget)}{$autoScrollTarget}{/if}{else}#{/if}"}
                        <a
                            {if $shopIsAtLeast57 && $Einstellungen.prgpattern.prg_pattern_enabled !== 'N'}
                                data-prg-href="{$href|default:''|base64_encode}"
                                href="#"
                            {else}
                                href="{$href}"
                            {/if}
                            title="{$attributeValue->getValue()|escape:'html'}{if $showFilterCount}: {$attributeValue->getCount()}{/if}"
                            data-toggle="tooltip"
                            data-placement="top"
                            data-boundary="window"
                            class="nav-link {if $attributeValue->isActive()}active{/if} filter-item"
                            rel="nofollow"
                        >
                            {image lazy=$lazyLoadImages  webp=true
                                src=$attributeImageURL
                                alt=$attributeValue->getValue()|escape:'html'
                                title="{$attributeValue->getValue()|escape:'html'}{if $showFilterCount}: {$attributeValue->getCount()}{/if}"
                                class="vmiddle filter-img"
                            }
                            <span class="d-none filter-item-value">
                                {$attributeValue->getValue()|escape:'html'}
                            </span>
                        </a>
                    {/block}
                {else}
                    {block name='snippets-filter-characteristics-nav-else'}
                        {$href = "{if !empty($attributeValue->getURL())}{$attributeValue->getURL()}{if !empty($autoScrollTarget)}{$autoScrollTarget}{/if}{else}#{/if}"}
                        <a
                            {if $shopIsAtLeast57 && $Einstellungen.prgpattern.prg_pattern_enabled !== 'N'}
                                data-prg-href="{$href|default:''|base64_encode}"
                                href="#"
                            {else}
                                href="{$href}"
                            {/if}
                            title="{$attributeValue->getValue()|escape:'html'}{if $showFilterCount}: {$attributeValue->getCount()}{/if}"
                            class="nav-link {if $attributeValue->isActive()}active{/if} filter-item"
                            rel="nofollow"
                        >
                            <div class="box-link-wrapper">
                                {if !empty($attributeImageURL)}
                                    {image lazy=$lazyLoadImages webp=true
                                        src=$attributeImageURL
                                        alt=$attributeValue->getValue()|escape:'html'
                                        title="{$attributeValue->getValue()|escape:'html'}{if $showFilterCount}: {$attributeValue->getCount()}{/if}"
                                        class="vmiddle filter-img"
                                    }
                                {/if}
                                <span class="et-filter-option-name filter-item-value">
                                    {$attributeValue->getValue()|escape:'html'}
                                </span>
                                {if $showFilterCount}
                                    <span class="badge badge-outline-secondary">{$attributeValue->getCount()}{if $shopIsAtLeast55}<span class="sr-only"> {lang key='productsFound'}</span>{/if}</span>
                                {/if}
                            </div>
                        </a>
                    {/block}
                {/if}
            {/block}
        {/if}
    {/foreach}
    {if !$is_dropdown && $limit != -1 && count($Merkmal->getOptions()) > $limit}
        {block name='snippets-filter-characteristics-more-bottom'}
                </ul>
            </div>
            <div class="snippets-filter-show-all">
                <button class="btn btn-link"
                    role="button"
                    data-toggle="collapse"
                    data-target="#box-collps-filter-attribute-{$Merkmal->getValue()}"
                    aria-expanded="{if $Merkmal->isActive()}true{else}false{/if}"
                    aria-controls="box-collps-filter-attribute-{$Merkmal->getValue()}"
                >
                    {lang key='showAll'}
                </button>
            </div>
        {/block}
    {/if}
    {if $Merkmal->getData('cTyp') === 'BILD'}
        </ul>
    {/if}
{/block}
