{block name="et-jtl-search-filters"}
    {assign var="filterActive" value=false}
    {$filterPosition=$filterPosition|default:'left'}
    {$filterStyle=$filterStyle|default:'open'}

    <script src="{$path_jq_migrate}"></script>
    <script src="{$path_jq_ui}"></script>
    {foreach $oExtendedJTLSearchResponse->oSearch->oFilterGroup_arr as $filterGroup}
        <div class="col{if $filterPosition === 'left'}-12{/if} et-product-list-filter-item">
            <div class="{if $filterPosition !== 'left'}dropdown {/if}et-product-list-filter-generic">
                {if $filterPosition === 'left'}
                    {foreach from=$filterGroup->oFilterItem_arr item=$filter}
                        {if $filter->bSet}
                            {$filterActive = true}
                            {break}
                        {/if}
                    {/foreach}

                    <div class="et-collapse {if $filterActive}active{/if}" data-toggle="collapse" role="button" aria-expanded="{if $filterStyle === 'open' || $filterActive}true{else}false{/if}" data-target="#filter-collapse-{$filterGroup->cMapping|@seofy}" aria-controls="filter-collapse-{$filterGroup->cMapping|@seofy}">
                        <span class="text-truncate">{$filterGroup->cMapping}</span>
                        <i class='{et_getIcon key="collapseOpen"} et-collapse-open'></i>
                        <i class='{et_getIcon key="collapseClosed"} et-collapse-closed'></i>
                    </div>
                {else}
                    <button type="button" class="btn dropdown-toggle et-dropdown-toggle" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
                        <span class="text-truncate">{$filterGroup->cMapping}</span>
                        <i class='{et_getIcon key="dropdownOpen"} et-dropdown-open'></i>
                        <i class='{et_getIcon key="dropdownClosed"} et-dropdown-closed'></i>
                    </button>
                {/if}
                <div{if $filterPosition === 'left'} id="filter-collapse-{$filterGroup->cMapping|@seofy}"{/if} class="{if $filterPosition === 'left'}collapse {if $filterStyle === 'open' || $filterActive}show{/if}{else}dropdown-menu{/if}">
                    {if $filterGroup->nType === 2} {* Slider *}
                        {assign var="oFilterItem" value=$filterGroup->oFilterItem_arr[0]}
                        <div class="jtl-search-slider">
                            <div class="layout-slider" style="width: 100%; height: 50px; padding-top: 10px;">
                                <input id="slider_{$filterGroup->cName}" type="slider" name="price" value="{$oFilterItem->cStateFrom};{$oFilterItem->cStateTo}" />
                            </div>
                        </div>
                        <script type="text/javascript" charset="utf-8">
                            $(document).ready(function () {ldelim}
                                jQuery("#slider_{$filterGroup->cName}").slider({ldelim}
                                    from:      {$oFilterItem->fFrom},
                                    to:        {$oFilterItem->fTo},
                                    limits:    false,
                                    step:      {$oFilterItem->fStep},
                                    scale:     [
                                        {foreach name=scale from=$oFilterItem->nScale_arr key=key item=nScale}
                                        {if $key % 2 === 0}
                                        {$nScale}{if !$smarty.foreach.scale.last}, {/if}
                                        {else}
                                        '|'{if !$smarty.foreach.scale.last}, {/if}
                                        {/if}
                                        {/foreach}
                                    ],
                                    dimension: '&nbsp;{$oFilterItem->cUnit}',
                                    min:       {$oFilterItem->fSolrFrom},
                                    max:       {$oFilterItem->fSolrTo},
                                    skin:      'round',
                                    smooth:    true,
                                    callback:  function (value) {ldelim}
                                        var xScale_arr = value.split(';');
                                        window.location.href = '{$oFilterItem->cURL}&fq{$nStatedFilterCount}={$filterGroup->cName}:{$oFilterItem->fFrom}_{$oFilterItem->fTo}-' + xScale_arr[0] + '_' + xScale_arr[1];
                                        {rdelim}
                                    {rdelim});
                                {rdelim});
                        </script>
                    {elseif $filterGroup->nType === 3} {* Colorbox *}
                        {strip}
                            <div class="jtl-search-colors">
                                {foreach $filterGroup->oFilterItem_arr as $oFilterItem}
                                    <div class="jtl-search-color{if $oFilterItem->bSet} active{/if}">
                                        <a rel="nofollow" href="{$oFilterItem->cURL}" class="color {$oFilterItem->cValue}" title="{$oFilterItem->cValue} ({$oFilterItem->nCount})">
                                            <span class="et-filter-option-name filter-item-value">{$oFilterItem->cValue}</span>
                                        </a>
                                    </div>
                                {/foreach}
                            </div>
                        {/strip}
                    {elseif $filterGroup->nType === 4 && $filterPosition === 'left'} {* Tinybox, only in left filter display, else it defaults to checkbox *}
                        {strip}
                            <div class="jtl-search-tinyboxes">
                                {foreach $filterGroup->oFilterItem_arr as $oFilterItem}
                                    <a rel="nofollow" href="{$oFilterItem->cURL}" class="btn btn-sm btn-outline-secondary jtl-search-tiny{if $oFilterItem->bSet} active{/if}" title="{$oFilterItem->cValue} ({$oFilterItem->nCount})">
                                        <span class="et-filter-option-name filter-item-value">{$oFilterItem->cValue}</span>
                                    </a>
                                {/foreach}
                            </div>
                        {/strip}
                    {else} {* Checkbox or Tinybox in a Dropdown *}
                        <div class="filter_state">
                            {foreach $filterGroup->oFilterItem_arr as $oFilterItem}
                                <a rel="nofollow" href="{$oFilterItem->cURL}" title="{$oFilterItem->cValue}" class="filter-item nav-link{if $oFilterItem->bSet} active{/if}">
                                    <div class="box-link-wrapper">
                                        <i class="{if $oFilterItem->bSet}{et_getIcon key="filterActive"}{else}{et_getIcon key="filterInactive"}{/if} snippets-filter-item-icon-right"></i>
                                        <span class="et-filter-option-name filter-item-value">{$oFilterItem->cValue}</span>
                                        <span class="badge badge-outline-secondary">{$oFilterItem->nCount}</span>
                                    </div>
                                </a>
                            {/foreach}
                        </div>
                    {/if}
                </div>
            </div>
        </div>
    {/foreach}
{/block}