{**
 * 2007-2019 PrestaShop and Contributors
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2019 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{if $facets|count}
  {block name='facets_clearall_button'}
    {if $activeFilters|count}
      <div id="_desktop_search_filters_clear_all" class="hidden-sm-down clear-all-wrapper my-4">
        <button data-search-url="{$clear_all_link}" class="btn btn-tertiary js-search-filters-clear-all font-medium pl-4">
          <!-- <i class="material-icons">&#xE14C;</i> -->
          {l s='Clear all' d='Shop.Theme.Actions'}
        </button>
      </div>
    {/if}
  {/block}
  <div id="search_filters">
    <div class="th-accordion">
      {foreach from=$facets item="facet"}
        {if !$facet.displayed}
          {continue}
        {/if}
        {if $facet.widgetType === 'dropdown'}
          <div class="th-accordion-item border-t border-gray-200 px-4 py-4">
            <h3 class="-mx-2 -my-3 flow-root">
              <!-- Expand/collapse section button -->
              <button id="show-filters-{$facet.label}" data-filter-name="{$facet.label}" type="button" class="th-accordion-item-trigger flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false">
                <span class="font-medium text-gray-900">
                  {$active_found = false}
                  {foreach from=$facet.filters item="filter"}
                    {if $filter.active}
                      {$filter.label}
                      {$active_found = true}
                    {/if}
                  {/foreach}
                  {if !$active_found}
                    {$facet.label}
                  {/if}
                </span>
                <span class="ml-6 flex items-center">
                  <!-- Expand icon, show/hide based on section open state. -->
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M6 9l6 6l6 -6"></path>
                  </svg>
                </span>
              </button>
            </h3>
            <!-- Filter section, show/hide based on section state. -->
            <div class="th-accordion-item-content pt-6 hidden" id="filter-section-{$facet.label}" data-filter-name="{$facet.label}">
              <div class="flex flex-wrap w-full">
                {foreach from=$facet.filters item="filter"}
                  {if !$filter.active}
                    <a
                      rel="nofollow"
                      href="{$filter.nextEncodedFacetsURL}"
                      class="select-list text-sm w-1/2 p-2 text-center"
                    >
                      {$filter.label}
                    </a>
                  {/if}
                {/foreach}
              </div>
            </div>
          </div>
        {/if}

        {if $facet.widgetType !== 'dropdown'}
          {block name='facet_item_other'}
            <div class="th-accordion-item border-t border-gray-200 px-4 py-4">
              <h3 class="-mx-2 -my-3 flow-root">
                <!-- Expand/collapse section button -->
                <button id="show-filters-{$facet.label}" data-filter-name="{$facet.label}" type="button" class="th-accordion-item-trigger flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false">
                  <span class="font-medium text-gray-900">
                    {$active_found = false}
                    {foreach from=$facet.filters item="filter"}
                      {if $filter.active}
                        {$filter.label}
                        {$active_found = true}
                      {/if}
                    {/foreach}
                    {if !$active_found}
                      {$facet.label}
                    {/if}
                  </span>
                  <span class="ml-6 flex items-center">
                    <!-- Expand icon, show/hide based on section open state. -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M6 9l6 6l6 -6"></path>
                    </svg>
                  </span>
                </button>
              </h3>
              <div class="th-accordion-item-content pt-6 hidden" id="filter-section-{$facet.label}" data-filter-name="{$facet.label}">
                <div class="flex flex-wrap w-full gap-2 flex-col">
                  {foreach from=$facet.filters key=filter_key item="filter"}
                    {if !$filter.displayed}
                      {continue}
                    {/if}

                    <div>
                      <label class="facet-label{if $filter.active} active {/if} flex items-center gap-2" 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"
                              {if $filter.active }checked{/if}
                            >
                            <!--
                            {if isset($filter.properties.texture)}
                              <span class="color texture" style="background-image:url({$filter.properties.texture})"></span>
                            {elseif isset($filter.properties.color)}
                              <span class="color" style="background-color:{$filter.properties.color}"></span>
                            {else}
                              <span {if !$js_enabled} class="ps-shown-by-js" {/if}><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></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"
                          rel="nofollow"
                        >
                          {$filter.label}
                          {if $filter.magnitude}
                            <span class="magnitude">({$filter.magnitude})</span>
                          {/if}
                        </a>
                      </label>
                    </div>
                  {/foreach}
                </div>
              </div>
            </div>
          {/block}
        {/if}
      {/foreach}
    </div>
  </div>
{/if}