<facet-filters-form class="facets facets-vertical-sort {{ visibility }}">
  <form class="facets-vertical-form" id="{{ id }}">
    <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 = collection.sort_by | default: collection.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 collection.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 template == 'search' %}
      <div class="product-count-vertical light" role="status">
        <h2 class="product-count__text text-body">
          <span id="ProductCount">
            {%- if collection.results_count -%}
              {{
                'templates.search.results_with_count' | t: terms: collection.terms, count: collection.results_count
              }}
            {%- elsif collection.products_count == collection.all_products_count -%}
              {{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
            {%- else -%}
              {{
                'products.facets.product_count' | t: product_count: collection.products_count, count: collection.all_products_count
              }}
            {%- endif -%}
          </span>
        </h2>
        {%- render 'loading-spinner' -%}
      </div>
    {% endif %}
  </form>
</facet-filters-form>