{% comment %}
  Renders facets (filtering and sorting)

  Accepts:
  - results: {Object} Collection or Search object
  - enable_filtering: {Boolean} Show filtering when true
  - enable_sorting: {Boolean} Show sorting when true
  - filter_type: {String} Type of filter
  - paginate: {Object}

  Usage:
  {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, filter_type: 'vertical', paginate: paginate %}
{% endcomment %}

{{ 'component-show-more.css' | asset_url | stylesheet_tag }}
{{ 'component-swatch-input.css' | asset_url | stylesheet_tag }}
{{ 'component-swatch.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign sort_by = results.sort_by | default: results.default_sort_by
  assign total_active_values = 0
  assign default_presentation = 'text'
  if results.url
    assign results_url = results.url
  else
    assign terms = results.terms | escape
    assign results_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
  endif
-%}

<div class="facets-container{% if filter_type == 'drawer' %} facets-container-drawer{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">


  {%- if filter_type == 'vertical' or filter_type == 'horizontal' -%}
    <facet-filters-form class="facets small-hide facet-filters-form-alpha">
      <form id="FacetFiltersForm" class="{% if filter_type == 'horizontal' %}facets__form{% else %}facets__form-vertical{% endif %}">
        {%- if results.terms -%}
          <input
            type="hidden"
            name="q"
            value="{{ results.terms | escape }}">
          <input
            name="options[prefix]"
            type="hidden"
            value="last">
        {%- endif -%}

        {% if enable_filtering %}
          {% comment %} Heading is the first tabbable element on filter type horizontal {% endcomment %}
          <div
            id="FacetsWrapperDesktop"
            {% if filter_type == 'horizontal' %}
            class="facets__wrapper"
            {% endif %}>
            {% comment %} {%- if filter_type == 'horizontal' and results.filters != empty -%}
                                                                                                                <h2 class="facets__heading caption-large text-body" id="verticalTitle" tabindex="-1">
                                                                                                                 {{ 'products.facets.filter_by_label' | t }}
                                                                                                                </h2>
                                                                                                {%- endif -%} {% endcomment %}

            {% if filter_type == 'horizontal' %}
              <span class="svg-wrapper filter-wrapper">
                {{ 'icon-filter.svg' | inline_asset_content }}
              </span>
            {% endif %}

            {% comment %} Pills are right below the title for filter type vertical {% endcomment %}
            {%- if filter_type == 'vertical' -%}
              <div class="active-facets active-facets-desktop">
                <div class="active-facets-vertical-filter">

                  {% comment %}
                    {%- unless results.filters == empty -%}
                    <h2
                    class="facets__heading facets__heading--vertical caption-large text-body"
                    id="verticalTitle"
                    tabindex="-1"
                    >
                    {{ 'products.facets.filter_by_label' | t }}
                    </h2>
                    {%- endunless -%}
                  {% endcomment %}


                  <facet-remove class="active-facets__button-wrapper">
                    <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
                      <span>{{ 'products.facets.clear_all' | t }}</span>
                    </a>
                  </facet-remove>
                </div>
                {%- for filter in results.filters -%}
                  {%- for value in filter.active_values -%}
                    <facet-remove>
                      <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                        <span class="active-facets__button-inner button button--secondary">
                          {{ filter.label | escape }}: {{ value.label | escape }}
                          <span class="svg-wrapper">
                            {{- 'icon-close-small.svg' | inline_asset_content -}}
                          </span>
                          <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                        </span>
                      </a>
                    </facet-remove>
                  {%- endfor -%}
                  {% if filter.type == 'price_range' %}
                    {% assign min = filter.min_value.value %}
                    {% assign max = filter.max_value.value %}
                    {%- if min != null or max != null -%}
                      <facet-remove>
                        <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
                          <span class="active-facets__button-inner button button--secondary">
                            {{ min | default: 0 | money }} - {{ max | default: filter.range_max | money }}
                            <span class="svg-wrapper">
                              {{- 'icon-close-small.svg' | inline_asset_content -}}
                            </span>
                            <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                          </span>
                        </a>
                      </facet-remove>
                    {%- endif -%}
                  {% endif %}
                {%- endfor -%}
              </div>
            {%- endif -%}

            <script src="{{ 'show-more.js' | asset_url }}" defer="defer"></script>
            {% comment %} Filters for both horizontal and vertical filter {% endcomment %}
            {%- for filter in results.filters -%}
              {% liquid
                assign total_active_values = total_active_values | plus: filter.active_values.size
                assign presentation = filter.presentation | default: default_presentation

                if presentation == 'image'
                  assign show_more_number = 12
                  assign visual_layout_class = 'facets-layout facets-layout-grid facets-layout-grid--' | append: presentation
                else
                  assign show_more_number = 10
                  assign visual_layout_class = 'facets-layout facets-layout-list facets-layout-list--' | append: presentation
                endif
              %}

              {% case filter.type %}
                {% when 'boolean'
                  , 'list' %}
                  <details
                    id="Details-{{ filter.param_name | escape }}-{{ section.id }}"
                    class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
                    data-index="{{ forloop.index }}"
                    {% if filter_type == 'vertical' and forloop.index <= 3 %}
                    open
                    {% endif %}>
                    <summary class="facets__summary caption-large focus-offset" aria-label="{{ filter.label | escape }} ({{ 'products.facets.filters_selected.one' | t: count: filter.active_values.size }})">
                      <div>
                        <span class="facets__summary-label">
                          {{- filter.label | escape }}
                          {%- if filter_type == 'vertical' -%}
                            <span class="facets__selected{% if filter.active_values.size == 0 %} hidden{% endif %}">
                              ({{ filter.active_values.size }})</span>
                          {%- endif -%}
                        </span>
                        {%- if filter_type == 'vertical' and filter.operator == 'AND' -%}
                          <span class="facets__and-helptext">
                            {{ 'products.facets.filter_and_operator_subtitle' | t }}
                          </span>
                        {%- endif -%}
                        {% if filter_type == 'horizontal' %}
                          {{- 'icon-caret.svg' | inline_asset_content -}}
                        {% else %}
                          {{- 'icon-plus.svg' | inline_asset_content -}}
                          {{- 'icon-minus.svg' | inline_asset_content -}}
                        {% endif %}
                      </div>
                    </summary>
                    <div id="Facet-{{ forloop.index }}-{{ section.id }}" class="parent-display {% if filter_type == 'horizontal' %}facets__display{% else %}facets__display-vertical{% endif %}">
                      {%- if filter_type != 'vertical' -%}
                        <div class="facets__header">
                          <div>
                            <span class="facets__selected">
                              {{- 'products.facets.filters_selected' | t: count: filter.active_values.size -}}
                            </span>
                            {%- if filter.operator == 'AND' -%}
                              <span class="facets__and-helptext">
                                {{ 'products.facets.filter_and_operator_subtitle' | t }}
                              </span>
                            {%- endif -%}
                          </div>
                          <facet-remove>
                            <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
                              {{ 'products.facets.reset' | t }}
                            </a>
                          </facet-remove>
                        </div>
                      {%- endif -%}
                      <fieldset class="facets-wrap parent-wrap{% if filter_type == 'vertical' %} facets-wrap-vertical{% endif %}">
                        <legend class="visually-hidden">{{ filter.label | escape | upcase }}</legend>
                        {%- liquid
                          if filter.label == 'Loft' or filter.label == 'Size'
                            assign sorted_values = filter.values
                          else
                            assign sorted_values = filter.values | sort: 'count' | reverse
                          endif
                          # Keep the selected values grouped together when operator is AND
                          if filter.operator == 'AND'
                            assign active_filter_values = filter.values | where: 'active', true
                            assign inactive_filter_values = filter.values | where: 'active', false
                            assign sorted_values = active_filter_values | concat: inactive_filter_values
                          endif
                        -%}
                        <ul class="{{ visual_layout_class }}{% if filter_type == 'vertical' %} facets__list--vertical{% else %} facets__list{% endif %} list-unstyled" role="list">
                          {%- for value in sorted_values -%}
                            {% liquid
                              assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-' | append: forloop.index
                              assign is_disabled = false
                              if value.count == 0 and value.active == false
                                assign is_disabled = true
                              endif
                            %}

                            {%- capture label_class -%}
                            facets__label facet-checkbox{% if is_disabled %} disabled{% endif %}{% if value.active %} active{% endif %}
                            {%- endcapture -%}
                            {%- capture text_value -%}
                              <span class="facet-checkbox__text" aria-hidden="true">
                                <span class="facet-checkbox__text-label">{{- value.label | escape | upcase }}</span> ({{- value.count -}})
                              </span>
                              <span class="visually-hidden">
                                {{- value.label | escape | upcase }} (
                                {%- if value.count == 1 -%}
                                  {{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
                                {%- else -%}
                                  {{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
                                {%- endif -%}
                                )
                              </span>
                            {%- endcapture -%}
                            <li class="list-menu__item facets__item{% if forloop.index > show_more_number and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
                              {%- if presentation == 'swatch' -%}
                                <div class="{{ label_class }}">
                                  <div class="swatch-input-wrapper">
                                    {% render 'swatch-input'
                                      , id: input_id
                                      , type: 'checkbox'
                                      , name: value.param_name
                                      , value: value.value
                                      , product_form_id: 'FacetFiltersForm'
                                      , swatch: value.swatch
                                      , checked: value.active
                                      , disabled: is_disabled
                                    %}
                                  </div>

                                  {{ text_value }}
                                </div>
                              {%- else -%}
                                <label for="{{ input_id }}" class="{{ label_class }}">
                                  <input
                                    type="checkbox"
                                    name="{{ value.param_name }}"
                                    value="{{ value.value }}"
                                    id="{{ input_id }}"
                                    {% if value.active %}
                                    checked
                                    {% endif %}
                                    {% if is_disabled %}
                                    disabled
                                    {% endif %}>

                                  {%- if presentation == 'image' -%}
                                    <div class="facets__image-wrapper">
                                      {%- if value.image -%}
                                        {{
                                          value.image | image_url: width: 300 | image_tag: class: 'facets__image', alt: value.alt
                                        }}
                                      {%- endif -%}
                                    </div>
                                  {%- else -%}
                                    {{- 'icon-circle.svg' | inline_asset_content -}}

                                    <div class="svg-wrapper">
                                      {{- 'icon-dotmark.svg' | inline_asset_content -}}
                                    </div>
                                  {%- endif -%}

                                  {{ text_value }}
                                </label>
                              {%- endif -%}
                            </li>
                          {%- endfor -%}
                        </ul>
                      </fieldset>
                      {%- if filter.values.size > show_more_number and filter_type == 'vertical' -%}
                        <show-more-button>
                          <button
                            class="button-show-more link underlined-link"
                            id="Show-More-{{ forloop.index }}-{{ section.id }}"
                            type="button">
                            <span class="label-show-more label-text">
                              <span aria-hidden="true">+
                              </span>
                              {{ 'products.facets.show_more' | t -}}</span>
                            <span class="label-show-less label-text hidden">
                              <span aria-hidden="true">-
                              </span>
                              {{ 'products.facets.show_less' | t -}}</span>
                          </button>
                        </show-more-button>
                      {%- endif %}
                    </div>
                  </details>
                {% when 'price_range' %}
                  <details
                    id="Details-{{ filter.param_name | escape }}-{{ section.id }}"
                    class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
                    data-index="{{ forloop.index }}"
                    {% if filter_type == 'vertical' and forloop.index <= 3 %}
                    open
                    {% endif %}>
                    <summary class="facets__summary caption-large focus-offset">
                      <div>
                        <span>{{ filter.label | escape }}</span>
                        {% if filter_type == 'horizontal' %}
                          {{- 'icon-caret.svg' | inline_asset_content -}}
                        {% else %}
                          {{- 'icon-minus.svg' | inline_asset_content -}}
                          {{- 'icon-plus.svg' | inline_asset_content -}}
                        {% endif %}
                      </div>
                    </summary>
                    <div id="Facet-{{ forloop.index }}-{{ section.id }}" class="{% if filter_type == 'horizontal' %}facets__display{% else %}facets__display-vertical{% endif %}">
                      <div class="{% if filter_type == 'horizontal' %}facets__header{% else %}facets__header-vertical{% endif %}">
                        {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
                        <span class="facets__selected">
                          {{- 'products.facets.max_price' | t: price: max_price_amount -}}
                        </span>
                        {%- if filter_type != 'vertical' -%}
                          <facet-remove>
                            <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
                              {{ 'products.facets.reset' | t }}
                            </a>
                          </facet-remove>
                        {%- endif -%}
                      </div>
                      <price-range class="facets__price">
                        {% render 'price-facet'
                          , filter: filter
                          , id_prefix: 'Filter-'
                          , filter_type: filter_type %}
                      </price-range>
                    </div>
                  </details>
              {% endcase %}
            {%- endfor -%}
          </div>
          {% comment %} Pills after filtes on filter type horizontal {% endcomment %}
          {%- if filter_type == 'horizontal' -%}
            <div class="active-facets active-facets-desktop">
              {%- for filter in results.filters -%}
                {%- for value in filter.active_values -%}
                  <facet-remove>
                    <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                      <span class="active-facets__button-inner button button--secondary">
                        {{ filter.label | escape }}: {{ value.label | escape }}
                        <span class="svg-wrapper">
                          {{- 'icon-close-small.svg' | inline_asset_content -}}
                        </span>
                        <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                      </span>
                    </a>
                  </facet-remove>
                {%- endfor -%}
                {% if filter.type == 'price_range' %}
                  {% assign min = filter.min_value.value %}
                  {% assign max = filter.max_value.value %}
                  {%- if min != null or max != null -%}
                    <facet-remove>
                      <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
                        <span class="active-facets__button-inner button button--secondary">
                          {{ min | default: 0 | money }} - {{ max | default: filter.range_max | money }}
                          <span class="svg-wrapper">
                            {{- 'icon-close-small.svg' | inline_asset_content -}}
                          </span>
                          <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                        </span>
                      </a>
                    </facet-remove>
                  {%- endif -%}
                {% endif %}
              {%- endfor -%}
              <facet-remove class="active-facets__button-wrapper">
                <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
                  <span>{{ 'products.facets.clear_all' | t }}</span>
                </a>
              </facet-remove>
            </div>
          {%- endif -%}
        {% endif %}

        {% if results.current_vendor or results.current_type %}
          <input
            type="hidden"
            name="q"
            value="{{ results.current_vendor }}{{ results.current_type }}">
        {% endif %}

        {%- if filter_type == 'horizontal' -%}
          {% comment %} Sorting and product count are the last elements when filter type is horizontal {% endcomment %}
          {%- if enable_sorting -%}
            <div class="facet-filters sorting caption">
              <div class="facet-filters__field">
                <h2 class="facet-filters__label caption-large text-body">
                  {{ 'products.facets.sort_by_label' | t }}
                </h2>
                <div class="select">
                  {%- assign sort_by = results.sort_by | default: results.default_sort_by -%}
                  <select
                    name="sort_by"
                    class="facet-filters__sort select__select caption-large"
                    id="SortBy"
                    aria-label="{{ 'products.facets.sort_by_label' | t }}"
                    aria-describedby="a11y-refresh-page-message">
                    {%- for option in results.sort_options -%}
                      <option
                        value="{{ option.value | escape }}"
                        {% if option.value == sort_by %}
                        selected="selected"
                        {% endif %}>
                        {{ option.name | escape }}
                      </option>
                    {%- endfor -%}
                  </select>
                  <span class="svg-wrapper">
                    {{- 'icon-caret.svg' | inline_asset_content -}}
                  </span>
                </div>
              </div>
            </div>
          {%- endif -%}

          <div class="product-count light product-count-bravo" role="status">
            <h2 class="product-count__text text-body">
              <span id="ProductCount">
                {%- if results.results_count -%}
                  {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
                {%- elsif results.products_count == results.all_products_count -%}
                  {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
                {%- else -%}
                  {{
                    'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count
                  }}
                {%- endif -%}
              </span>
            </h2>
            {%- render 'loading-spinner' -%}
          </div>
        {%- endif -%}
      </form>
    </facet-filters-form>
  {%- endif -%}
  {% comment %}  Drawer and mobile filter {% endcomment %}
  <menu-drawer class="mobile-facets__wrapper{% if filter_type == 'horizontal' or filter_type == 'vertical' %} medium-hide large-up-hide{% endif %}" data-breakpoint="mobile">
    <details class="mobile-facets__disclosure disclosure-has-popup">
      <summary class="mobile-facets__open-wrapper focus-offset">
        <span class="mobile-facets__open button{% if filter_type == 'drawer' and enable_filtering == false %} medium-hide large-up-hide{% endif %}">
          <span class="svg-wrapper">
            {{- 'icon-filter.svg' | inline_asset_content -}}
          </span>
          <span class="mobile-facets__open-label button-label medium-hide large-up-hide">
            {%- if enable_filtering -%}
              {{ 'products.facets.filter_button' | t }}
            {%- elsif enable_sorting -%}
              {{ 'products.facets.sort_button' | t }}
            {%- endif -%}
          </span>
          <span class="mobile-facets__open-label button-label small-hide">
            {%- if enable_filtering -%}
              {{ 'products.facets.filter_button' | t }}
            {%- endif -%}
          </span>
        </span>
        <span tabindex="0" class="mobile-facets__close">
          <span class="svg-wrapper">
            {{- 'icon-close-simple.svg' | inline_asset_content -}}
          </span>
        </span>
      </summary>
      <facet-filters-form class="facet-filters-form-bravo">
        <form id="FacetFiltersFormMobile" class="mobile-facets">
          <div class="mobile-facets__inner gradient">
            <div class="mobile-facets__header">
              <div class="mobile-facets__header-inner">
                <div class="text-with-filter-icon">
                  <span class="svg-wrapper">
                    {{- 'icon-filter.svg' | inline_asset_content -}}
                  </span>
                  <h2 class="mobile-facets__heading medium-hide large-up-hide">
                    {%- if enable_filtering -%}
                      {{ 'products.facets.filter_button' | t }}
                    {%- elsif enable_sorting -%}
                      {{ 'products.facets.sort_button' | t }}
                    {%- endif -%}
                  </h2>
                  <h2 class="mobile-facets__heading small-hide">
                    {%- if enable_filtering -%}
                      {{ 'products.facets.filter_button' | t }}
                    {%- endif -%}
                  </h2>
                </div>

              {% comment %} <p class="mobile-facets__count">
                                                                                                                                  {%- if results.results_count -%}
                                                                                                                                    {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
                                                                                                                                  {%- elsif results.products_count == results.all_products_count -%}
                                                                                                                                    {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
                                                                                                                                  {%- else -%}
                                                                                                                                    {{
                                                                                                                                      'products.facets.product_count'
                                                                                                                                      | t: product_count: results.products_count, count: results.all_products_count
                                                                                                                                    }}
                                                                                                                                  {%- endif -%}
                                                                                                                  </p> {% endcomment %}
              </div>
            </div>
            <div id="FacetsWrapperMobile" class="mobile-facets__main has-submenu gradient">
              {%- if enable_filtering -%}
                {%- for filter in results.filters -%}
                  {% liquid
                    assign presentation = filter.presentation | default: default_presentation
                    if presentation == 'image'
                      assign visual_layout_class = 'facets-layout facets-layout-grid facets-layout-grid--' | append: presentation
                    else
                      assign visual_layout_class = 'facets-layout facets-layout-list facets-layout-list--' | append: presentation
                    endif
                  %}

                  {% case filter.type %}
                    {% when 'boolean'
                      , 'list' %}
                      <details
                        id="Details-Mobile-{{ filter.param_name | escape }}-{{ section.id }}"
                        class="mobile-facets__details js-filter"
                        data-index="mobile-{{ forloop.index }}"
                        {% if forloop.index <= 3 %}
                        open{% endif %}>
                        <summary class="mobile-facets__summary focus-inset">
                          <div>
                            <span>{{ filter.label | escape | upcase }}</span>
                            {{- 'icon-plus.svg' | inline_asset_content -}}
                            {{- 'icon-minus.svg' | inline_asset_content -}}
                          {% comment %} <span class="mobile-facets__arrow">
                                                                                                                                                                                                                                  {{- 'icon-arrow.svg' | inline_asset_content -}}
                                                                                                                                                                                                                  </span> {% endcomment %}
                          </div>
                        </summary>
                        <div id="FacetMobile-{{ forloop.index }}-{{ section.id }}" class="mobile-facets__submenu gradient">
                          {% comment %} <button
                                                                                                                                                                                                                                class="mobile-facets__close-button link link--text focus-inset"
                                                                                                                                                                                                                                aria-expanded="true"
                                                                                                                                                                                                                                type="button"
                                                                                                                                                                                                                              >
                                                                                                                                                                                                                                {{- 'icon-arrow.svg' | inline_asset_content -}}
                                                                                                                                                                                                                                <span>{{ filter.label | escape }}</span>
                                                                                                                                                                                                                                {%- if filter.operator == 'AND' -%}
                                                                                                                                                                                                                                  <span class="facets__and-helptext">
                                                                                                                                                                                                                                    {{ 'products.facets.filter_and_operator_subtitle' | t }}
                                                                                                                                                                                                                                  </span>
                                                                                                                                                                                                                                {%- endif -%}
                                                                                                                                                                                                                </button> {% endcomment %}
                          <ul class="{{ visual_layout_class }} mobile-facets__list list-unstyled" role="list">
                            {%- liquid
                              assign sorted_values = filter.values
                              # Keep the selected values grouped together when operator is AND
                              if filter.operator == 'AND'
                                assign active_filter_values = filter.values | where: 'active', true
                                assign inactive_filter_values = filter.values | where: 'active', false
                                assign sorted_values = active_filter_values | concat: inactive_filter_values
                              endif
                            -%}
                            {%- for value in sorted_values -%}
                              {% liquid
                                assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-mobile-' | append: forloop.index
                                assign is_disabled = false
                                if value.count == 0 and value.active == false
                                  assign is_disabled = true
                                endif
                              %}

                              {%- capture label_class -%}
                              facets__label mobile-facets__label{% if is_disabled %} disabled{% endif %}{% if value.active %} active{% endif %}
                              {%- endcapture -%}
                              {%- capture text_value -%}
                                <span class="facet-checkbox__text" aria-hidden="true">
                                  <span class="facet-checkbox__text-label">{{- value.label | escape | upcase }}</span> ({{- value.count -}})
                                </span>
                                <span class="visually-hidden">
                                  {{- value.label | escape | upcase }} (
                                  {%- if value.count == '1' -%}
                                    {{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
                                  {%- else -%}
                                    {{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
                                  {%- endif -%}
                                  )
                                </span>
                              {%- endcapture -%}
                              <li class="mobile-facets__item list-menu__item">
                                {% if presentation == 'swatch' %}
                                  <div class="{{ label_class }}">
                                    <div class="swatch-input-wrapper">
                                      {% render 'swatch-input'
                                        , id: input_id
                                        , type: 'checkbox'
                                        , name: value.param_name
                                        , value: value.value
                                        , product_form_id: 'FacetFiltersFormMobile'
                                        , swatch: value.swatch
                                        , checked: value.active
                                        , disabled: is_disabled
                                      %}
                                    </div>

                                    {{ text_value }}
                                  </div>
                                {% else %}
                                  <label for="{{ input_id }}" class="{{ label_class }}">
                                    <input
                                      class="mobile-facets__checkbox"
                                      type="checkbox"
                                      name="{{ value.param_name }}"
                                      value="{{ value.value }}"
                                      id="{{ input_id }}"
                                      {% if value.active %}
                                      checked
                                      {% endif %}
                                      {% if is_disabled %}
                                      disabled
                                      {% endif %}>

                                    {%- if presentation == 'image' -%}
                                      <div class="facets__image-wrapper">
                                        {%- if value.image -%}
                                          {{
                                            value.image | image_url: width: 300 | image_tag: class: 'facets__image', alt: value.alt
                                          }}
                                        {%- endif -%}
                                      </div>
                                    {%- else -%}
                                      <span class="mobile-facets__highlight">
                                    </span>
                                      {% comment %} {{- 'square.svg' | inline_asset_content -}} {% endcomment %}

                                      {{- 'icon-circle.svg' | inline_asset_content -}}
                                      {{- 'icon-dotmark.svg' | inline_asset_content -}}


                                      {% comment %} <div class="svg-wrapper">
                                                                                                                                                                                                                                                                                                                </div> {% endcomment %}
                                    {%- endif %}

                                    {{ text_value }}
                                  </label>
                                {% endif %}
                              </li>
                            {%- endfor -%}
                          </ul>

                        {% comment %}
                          <div class="mobile-facets__footer gradient">
                          <facet-remove class="mobile-facets__clear-wrapper">
                          <a href="{{ filter.url_to_remove }}" class="mobile-facets__clear underlined-link">
                          {{- 'products.facets.clear' | t -}}
                          </a>
                          </facet-remove>
                          <button
                          type="button"
                          class="button button--primary"
                          onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()"
                          >
                          {{ 'products.facets.apply' | t }}
                          </button>
                          </div>
                        {% endcomment %}
                        </div>
                      </details>
                    {% when 'price_range' %}
                      <details
                        id="Details-Mobile-{{ filter.param_name | escape }}-{{ section.id }}"
                        class="mobile-facets__details js-filter"
                        data-index="mobile-{{ forloop.index }}"
                        {% if forloop.index <= 3 %}
                        open{% endif %}>
                        <summary class="mobile-facets__summary focus-inset">
                          <div>
                            <span>{{ filter.label | escape | upcase }}</span>

                            {% comment %} <span class="mobile-facets__arrow">
                                                                                                                                                                                                                                                {{- 'icon-arrow.svg' | inline_asset_content -}}
                                                                                                                                                                                                                                </span> {% endcomment %}
                            {{- 'icon-plus.svg' | inline_asset_content -}}
                            {{- 'icon-minus.svg' | inline_asset_content -}}
                          </div>
                        </summary>
                        <div id="FacetMobile-{{ forloop.index }}-{{ section.id }}" class="mobile-facets__submenu gradient">
                          {% comment %} <button
                                                                                                                                                                                                                                class="mobile-facets__close-button link link--text focus-inset"
                                                                                                                                                                                                                                aria-expanded="true"
                                                                                                                                                                                                                                type="button"
                                                                                                                                                                                                                              >
                                                                                                                                                                                                                                {{- 'icon-arrow.svg' | inline_asset_content -}}
                                                                                                                                                                                                                                {{ filter.label | escape }}
                                                                                                                                                                                                                </button> {% endcomment %}

                          {%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
                          <p class="mobile-facets__info">
                            {{ 'products.facets.max_price' | t: price: max_price_amount }}
                          </p>

                          <price-range class="facets__price">
                            {% render 'price-facet'
                              , filter: filter
                              , id_prefix: 'Mobile-Filter-' %}
                          </price-range>
                        {% comment %}
                          <div class="mobile-facets__footer mobile-facets__footer-alpha">
                          <facet-remove class="mobile-facets__clear-wrapper">
                          <a href="{{ filter.url_to_remove }}" class="mobile-facets__clear underlined-link">
                          {{- 'products.facets.clear' | t -}}
                          </a>
                          </facet-remove>
                          <button
                          type="button"
                          class="button button--primary"
                          onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()"
                          >
                          {{ 'products.facets.apply' | t }}
                          </button>
                          </div>
                        {% endcomment %}
                        </div>
                      </details>
                  {% endcase %}
                {%- endfor -%}
              {%- endif -%}

            {% comment %} {%- if enable_sorting and filter_type != 'vertical' -%}
                                                                                                                  <div
                                                                                                                    id="Details-Mobile-SortBy-{{ section.id }}"
                                                                                                                    class="mobile-facets__details js-filter{% if filter_type == 'drawer' %} medium-hide large-up-hide{% endif %}"
                                                                                                                    data-index="mobile-{{ forloop.index }}"
                                                                                                                  >
                                                                                                                    <div class="mobile-facets__summary">
                                                                                                                      <div class="mobile-facets__sort">
                                                                                                                        <label for="SortBy-mobile">{{ 'products.facets.sort_by_label' | t }}</label>
                                                                                                                        <div class="select">
                                                                                                                          <select
                                                                                                                            name="sort_by"
                                                                                                                            class="select__select"
                                                                                                                            id="SortBy-mobile"
                                                                                                                            aria-describedby="a11y-refresh-page-message"
                                                                                                                          >
                                                                                                                            {%- for option in results.sort_options -%}
                                                                                                                              <option
                                                                                                                                value="{{ option.value | escape }}"
                                                                                                                                {% if option.value == sort_by %}
                                                                                                                                  selected="selected"
                                                                                                                                {% endif %}
                                                                                                                              >
                                                                                                                                {{ option.name | escape }}
                                                                                                                              </option>
                                                                                                                            {%- endfor -%}
                                                                                                                          </select>
                                                                                                                          <span class="svg-wrapper">
                                                                                                                            {{- 'icon-caret.svg' | inline_asset_content -}}
                                                                                                                          </span>
                                                                                                                        </div>
                                                                                                                      </div>
                                                                                                                    </div>
                                                                                                                  </div>
                                                                                                  {%- endif -%} {% endcomment %}

            {% comment %} <div class="mobile-facets__footer mobile-facets__footer-bravo">
                                                                                                                  <facet-remove class="mobile-facets__clear-wrapper">
                                                                                                                    <a href="{{ results_url }}" class="mobile-facets__clear underlined-link">
                                                                                                                      {{- 'products.facets.clear_all' | t -}}
                                                                                                                    </a>
                                                                                                                  </facet-remove>
                                                                                                                  <button
                                                                                                                    type="button"
                                                                                                                    class="button button--primary"
                                                                                                                    onclick="this.closest('.mobile-facets__wrapper').querySelector('summary').click()"
                                                                                                                  >
                                                                                                                    {{ 'products.facets.apply' | t }}
                                                                                                                  </button>
                                                                                                  </div> {% endcomment %}
            </div>

            {% if results.current_vendor or results.current_type %}
              <input
                type="hidden"
                name="q"
                value="{{ results.current_vendor }}{{ results.current_type }}">
            {% endif %}

            {%- if results.terms -%}
              <input
                type="hidden"
                name="q"
                value="{{ results.terms | escape }}">
              <input
                name="options[prefix]"
                type="hidden"
                value="last">
            {%- endif -%}
          </div>
        </form>
      </facet-filters-form>
    </details>
  </menu-drawer>

  {% render 'main-facet-filters-form'
    , collection: results
    , visibility: 'medium-hide large-up-hide'
    , id: 'MobileFacetSortForm' %}

  <div class="active-facets active-facets-mobile medium-hide large-up-hide">
    {%- for filter in results.filters -%}
      {%- for value in filter.active_values -%}
        <facet-remove>
          <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
            <span class="active-facets__button-inner button button--secondary">
              {{ filter.label | escape }}: {{ value.label | escape }}
              <span class="svg-wrapper">
                {{- 'icon-close-small.svg' | inline_asset_content -}}
              </span>
              <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
            </span>
          </a>
        </facet-remove>
      {%- endfor -%}

      {%- if filter.type == 'price_range' -%}
        {% assign min = filter.min_value.value %}
        {% assign max = filter.max_value.value %}
        {%- if min != null or max != null -%}
          <facet-remove>
            <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
              <span class="active-facets__button-inner button button--secondary">
                {{ min | default: 0 | money }} - {{ max | default: filter.range_max | money }}
                <span class="svg-wrapper">
                  {{- 'icon-close-small.svg' | inline_asset_content -}}
                </span>
                <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
              </span>
            </a>
          </facet-remove>
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
    <facet-remove class="active-facets__button-wrapper">
      <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
        <span>{{ 'products.facets.clear_all' | t }}</span>
      </a>
    </facet-remove>
  </div>
  {% comment %} Sort, product count and filter pills at the end when filter is type of Drawer for the correct tabbing order {% endcomment %}
  {%- if enable_sorting and filter_type == 'drawer' -%}
    <facet-filters-form class="facets small-hide facet-filters-form-charlie">
      <form id="FacetSortDrawerForm" class="facets__form">
        <div class="facet-filters sorting caption small-hide">
          <div class="facet-filters__field">
            <h2 class="facet-filters__label caption-large text-body">
              {{ 'products.facets.sort_by_label' | t }}
            </h2>
            <div class="select">
              {%- assign sort_by = results.sort_by | default: results.default_sort_by -%}
              <select
                name="sort_by"
                class="facet-filters__sort select__select caption-large"
                id="SortBy"
                aria-label="{{ 'products.facets.sort_by_label' | t }}"
                aria-describedby="a11y-refresh-page-message">
                {%- for option in results.sort_options -%}
                  <option
                    value="{{ option.value | escape }}"
                    {% if option.value == sort_by %}
                    selected="selected"
                    {% endif %}>
                    {{ option.name | escape }}
                  </option>
                {%- endfor -%}
              </select>
              <span class="svg-wrapper">
                {{- 'icon-caret.svg' | inline_asset_content -}}
              </span>
            </div>
          </div>
        </div>

        {% if results.current_vendor or results.current_type %}
          <input
            type="hidden"
            name="q"
            value="{{ results.current_vendor }}{{ results.current_type }}">
        {% endif %}

        {%- if results.terms -%}
          <input
            type="hidden"
            name="q"
            value="{{ results.terms | escape }}">
          <input
            name="options[prefix]"
            type="hidden"
            value="last">
        {%- endif -%}
      </form>
    </facet-filters-form>
  {%- endif -%}

  {% comment %}

    {% unless filter_type == 'vertical' %}
    <div
    class="product-count light product-count-alpha{% if filter_type == 'vertical' %} small-hide medium-hide large-up-hide{% elsif filter_type == 'horizontal' %} medium-hide large-up-hide{% endif %}"
    role="status"
    >
    <h2 class="product-count__text text-body">
    <span id="ProductCount">
    {%- if results.results_count -%}
    {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }}
    {%- elsif results.products_count == results.all_products_count -%}
    {{ 'products.facets.product_count_simple' | t: count: results.products_count }}
    {%- else -%}
    {{
    'products.facets.product_count'
    | t: product_count: results.products_count, count: results.all_products_count
    }}
    {%- endif -%}
    </span>
    </h2>
    {%- render 'loading-spinner' -%}
    </div>
    {% endunless %}
  {% endcomment %}

  {%- if filter_type == 'drawer' -%}
    <facet-filters-form class="facets facets-pill small-hide facet-filters-form-delta">
      <form id="FacetFiltersPillsForm" class="facets__form">
        <div class="active-facets active-facets-desktop">
          {%- for filter in results.filters -%}
            {%- for value in filter.active_values -%}
              <facet-remove>
                <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                  <span class="active-facets__button-inner button button--secondary">
                    {{ filter.label | escape }}: {{ value.label | escape }}
                    <span class="svg-wrapper">
                      {{- 'icon-close-small.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                  </span>
                </a>
              </facet-remove>
            {%- endfor -%}

            {%- if filter.type == 'price_range' -%}
              {% assign min = filter.min_value.value %}
              {% assign max = filter.max_value.value %}
              {%- if min != null or max != null -%}
                <facet-remove>
                  <a href="{{ filter.url_to_remove }}" class="active-facets__button active-facets__button--light">
                    <span class="active-facets__button-inner button button--secondary">
                      {{ min | default: 0 | money }} - {{ max | default: filter.range_max | money }}
                      <span class="svg-wrapper">
                        {{- 'icon-close-small.svg' | inline_asset_content -}}
                      </span>
                      <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                    </span>
                  </a>
                </facet-remove>
              {%- endif -%}
            {%- endif -%}
          {%- endfor -%}
          <facet-remove class="active-facets__button-wrapper">
            <a href="{{ results_url }}" class="active-facets__button-remove underlined-link">
              <span>{{ 'products.facets.clear_all' | t }}</span>
            </a>
          </facet-remove>
        </div>
      </form>
    </facet-filters-form>
  {%- endif -%}
</div>