{% if section.settings.show_col_sort_by %}
  <div class="sort-by bc-toggle">
    <div class="sort-by-inner">

      <label class="d-none d-md-block">{{ 'collections.sorting.title' | t }}</label>

      <div id="cata_sort_by">
        <button id="sort_by_button">
          <span class="name"></span>
          <i class="demo-icon icon-down-dir"></i>
        </button>
      </div>

      <ul id="sort_by_box" class="bc-dropdown">
        <li class="sort-action title-ascending" data-sort="title-ascending"><a href="javascript:;">{{ 'collections.sorting.az' | t }}</a></li>
        <li class="sort-action title-descending" data-sort="title-descending"><a href="javascript:;">{{ 'collections.sorting.za' | t }}</a></li>
        <li class="sort-action manual" data-sort="manual"><a href="javascript:;">{{ 'collections.sorting.featured' | t }}</a></li>
        <li class="sort-action price-ascending" data-sort="price-ascending"><a href="javascript:;">{{ 'collections.sorting.price_ascending' | t }}</a></li>
        <li class="sort-action price-descending" data-sort="price-descending"><a href="javascript:;">{{ 'collections.sorting.price_descending' | t }}</a></li>
        <li class="sort-action created-ascending" data-sort="created-ascending"><a href="javascript:;">{{ 'collections.sorting.date_ascending' | t }}</a></li>
        <li class="sort-action created-descending" data-sort="created-descending"><a href="javascript:;">{{ 'collections.sorting.date_descending' | t }}</a></li>
        <li class="sort-action best-selling" data-sort="best-selling"><a href="javascript:;">{{ 'collections.sorting.best_selling' | t }}</a></li>
      </ul>

    </div>
    
    <script type="text/javascript">
      Shopify.queryParams = {};
      if (location.search.length) {
        for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
          aKeyValue = aCouples[i].split('=');
          if (aKeyValue.length > 1) {
            Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
          }
        }
      }

      var val_default = '{{ collection.sort_by | default: collection.default_sort_by }}';

      jQuery('.sort-by li.sort-action').removeClass('active');

      jQuery('.sort-by li.' + val_default).addClass('active');

      var s = $('#sort_by_box li.sort-action.active');
      jQuery('.sort-by .name').html(s.html());

      {% assign _active_filters = false %}
      {% unless section.settings.sb_filters_position == 'none' %}
        {% for block in section.blocks %}

          {% case block.type %}
            {% when 'filter' %}

              {% if block.settings.sb_filters == 'groups' %}
                {% assign _active_filters = true %}
              {% endif %}

          {% endcase %}

        {% endfor %}
      {% endunless %}  

      {% if collection.all_tags.size == 0 or _active_filters == false %}
        jQuery('.sort-by li.sort-action').click(function(){  // add event any time the sort box changes
          if(!$(this).hasClass('active')){
            var value = jQuery(this).attr('data-sort');
            Shopify.queryParams.sort_by = value;
            location.search = jQuery.param(Shopify.queryParams);
          }
        });

      {% endif %}

    </script>
  </div>

{% endif %}