 {if $catalogue[0]->filter == "filtreHaut"}
  {if $displayedFacets|count }
    {assign var="nbrFacet" value=12/count($displayedFacets)}
    {if count($displayedFacets) == 5}
    {assign var="nbrFacet" value=2}
    {/if}
  {/if}
{/if}

{if $displayedFacets|count}
<div id="search_filters" class="{if $catalogue[0]->filter == "filtreHaut"}filtreHaut{elseif $catalogue[0]->filter == "filtreGauche"}filtreGauche{/if} {if count($displayedFacets) > 6}wrap-facet{/if}">
    {block name='facets_title'}
      <div class="title hidden-md-up filter-mob" data-target="#facet_all" data-toggle="collapse">
        <p  class="h6 facet-title">{l s='Filter By' d='Shop.Theme.Actions'}</p>
        <span class="navbar-toggler collapse-icons">
            <svg xmlns="http://www.w3.org/2000/svg" class="add" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>
            <svg xmlns="http://www.w3.org/2000/svg" class="remove" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
        </span>
      </div>
    {/block}

    <section id="facet_all" class="col-sm-12 col-xs-12 col-xxs-12 col-md-12 facet-all dropdown collapse">
      <button type="button" class="facet-all-close no-desk" data-dismiss="facet_all" aria-label="fermer" data-target="#facet_all" data-toggle="collapse">
        <span aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
        </span>  
      </button>
      <div class="facet-all-content col-sm-12 col-xs-12 col-xxs-12 col-md-12 {if count($displayedFacets) > 6}wrap-facet{/if}">
        <section class="facet no-desk">
          <div class="title hidden-md-up">
            <p  class="h6 facet-title">{l s='Filter' d='Shop.Theme.Actions'}</p>
          </div>
        </section>
        {block name='facets_clearall_button'}
          {if $activeFilters|count}
            <div id="_desktop_search_filters_clear_all" class="hidden-sm-down clear-all-wrapper">
              <button data-search-url="{$clear_all_link}" class="btn btn-tertiary js-search-filters-clear-all">
              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
                {l s='Clear all' d='Shop.Theme.Actions'}
              </button>
            </div>
          {/if}
        {/block}

        {foreach from=$displayedFacets item="facet"}
          <section class="facet clearfix {$facet.label} {if $catalogue[0]->filter == "filtreHaut"}col-sm-{$nbrFacet}{elseif $catalogue[0]->filter == "filtreGauche"} {/if}">
            <p class="h6 facet-title hidden-sm-down">{$facet.label}</p>
            {assign var=_expand_id value=10|mt_rand:100000}
            {assign var=_collapse value=true}
            {foreach from=$facet.filters item="filter"}
              {if $filter.active}{assign var=_collapse value=false}{/if}
            {/foreach}

            <div class="title hidden-md-up" data-target="#facet_{$_expand_id}" data-toggle="collapse"{if !$_collapse} aria-expanded="true"{/if}>
              <p class="h6 facet-title">{$facet.label}</p>
              <span class="navbar-toggler collapse-icons">
              <svg xmlns="http://www.w3.org/2000/svg" class="add" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>
              <svg xmlns="http://www.w3.org/2000/svg" class="remove" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
              </span>
            </div>

            {if in_array($facet.widgetType, ['radio', 'checkbox'])}
              {block name='facet_item_other'}
                <ul id="facet_{$_expand_id}" class="collapse{if !$_collapse} in{/if}">
                  {foreach from=$facet.filters key=filter_key item="filter"}
                    {if !$filter.displayed}
                      {continue}
                    {/if}

                    <li class="{if isset($filter.properties.color)}color-li {else}size-li{/if}">
                      <label class="facet-label{if $filter.active} active {/if}" for="facet_input_{$_expand_id}_{$filter_key}">
                        {if $facet.multipleSelectionAllowed}
                          <span class="custom-checkbox">
                            <input
                              id="facet_input_{$_expand_id}_{$filter_key}"
                              data-search-url="{$filter.nextEncodedFacetsURL}"
                              type="checkbox"
                              class="noInput"
                              title="{$filter.label}"
                              {if $filter.active }checked{/if}
                            >
                            {if isset($filter.properties.color)}
                              <span class="color {$filter.label}" title="{$filter.label}" style="background-color:{$filter.properties.color}"></span>
                            {elseif isset($filter.properties.texture)}
                              <span class="color texture" title="{$filter.label}" style="background-image:url({$filter.properties.texture})"></span>
                            {else}
                              <span {if !$js_enabled} class="ps-shown-by-js" {/if}>
                                <svg xmlns="http://www.w3.org/2000/svg" class="rtl-no-flip checkbox-checked" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
                              </span>
                            {/if}
                          </span>
                        {else}
                          <span class="custom-radio">
                            <input
                              id="facet_input_{$_expand_id}_{$filter_key}"
                              data-search-url="{$filter.nextEncodedFacetsURL}"
                              type="radio"
                              name="filter {$facet.label}"
                              {if $filter.active }checked{/if}
                            >
                            <span {if !$js_enabled} class="ps-shown-by-js" {/if}></span>
                          </span>
                        {/if}
                
                        <a
                          href="{$filter.nextEncodedFacetsURL}"
                          class="_gray-darker search-link js-search-link {if isset($filter.properties.color)}noInput{else}size-item{/if}"
                          rel="nofollow"
                        >
                          {$filter.label}
                          {if $filter.magnitude and $show_quantities}
                            <span class="magnitude">({$filter.magnitude})</span>
                          {/if}
                        </a>
                      </label>
                    </li>
                  {/foreach}
                </ul>
              {/block}

            {elseif $facet.widgetType == 'dropdown'}
              {block name='facet_item_dropdown'}
                <div id="facet_{$_expand_id}" class="col-sm-12 col-xs-12 col-md-12 facet-dropdown dropdown collapse{if !$_collapse} in{/if}">
                  <div class="dropdown-menu menu-open dropdown-filter">
                    {foreach from=$facet.filters item="filter"}
                      {if !$filter.active}
                        <a
                          rel="nofollow"
                          href="{$filter.nextEncodedFacetsURL}"
                          class="select-list js-search-link"
                        >
                          {$filter.label}
                          {if $filter.magnitude and $show_quantities}
                            ({$filter.magnitude})
                          {/if}
                        </a>
                      {/if}
                    {/foreach}
                  </div>
                </div>
              {/block}

            {elseif $facet.widgetType == 'slider'}
              {block name='facet_item_slider'}
                {foreach from=$facet.filters item="filter"}
                  <ul id="facet_{$_expand_id}"
                    class="faceted-slider collapse{if !$_collapse} in{/if}"
                    data-slider-min="{$facet.properties.min}"
                    data-slider-max="{$facet.properties.max}"
                    data-slider-id="{$_expand_id}"
                    data-slider-values="{$filter.value|@json_encode}"
                    data-slider-unit="{$facet.properties.unit}"
                    data-slider-label="{$facet.label}"
                    data-slider-specifications="{$facet.properties.specifications|@json_encode}"
                    data-slider-encoded-url="{$filter.nextEncodedFacetsURL}"
                  >
                    <li>
                      <p id="facet_label_{$_expand_id}">
                        {$filter.label}
                      </p>

                      <div id="slider-range_{$_expand_id}"></div>
                    </li>
                  </ul>
                {/foreach}
              {/block}
            {/if}
          </section>
        {/foreach}
      </div>
    </section>
</div>
{else}
  <div id="search_filters" style="display:none;">
  </div>  
{/if}
