<div class="desktop-2 tablet-6 mobile-3" id="aside">
  <div id="sidebar">





    <div class="desc-accordion">

      <ul class="active_tags" id="inject_position">
      </ul>

      {% comment %} sorting {% endcomment  %}

      {% if section.settings.sort_by %}
      <div class="extend has_sub_menu" aria-haspopup="true" aria-expanded="false"><h3>{{ 'collections.sorting.title' | t }}</h3></div>

      <div class="extended-submenu-prod" style="display:none">
        <div class="rte inner_prod_desc">
          <select id="sort-by" class="styled-select">
            <option value="manual">{{ 'collections.sorting.featured' | t }}</option>
            <option value="price-ascending">{{ 'collections.sorting.price_ascending' | t }}</option>
            <option value="price-descending">{{ 'collections.sorting.price_descending' | t }}</option>
            <option value="title-ascending">{{ 'collections.sorting.az' | t }}</option>
            <option value="title-descending">{{ 'collections.sorting.za' | t }}</option>
            <option value="created-ascending">{{ 'collections.sorting.date_ascending' | t }}</option>
            <option value="created-descending">{{ 'collections.sorting.date_descending' | t }}</option>
            <option value="best-selling">{{ 'collections.sorting.best_selling' | t }}</option>
          </select>
        </div>
      </div>
      {% endif %}





      {% comment %} filters by price {% endcomment  %}
      {% assign tags = section.settings.tags_1 | split: ',' %}
      {% assign show-filter = false %}
      {% for tag in tags %}
      {% if collection.all_tags contains tag %}
      {% assign show-filter = true %}
      {% endif %}
      {% endfor %}



      {% if show-filter %}
      <div class="extend has_sub_menu" aria-haspopup="true" aria-expanded="false"><h3 class="bord_btm">Filter by Size</h3></div>

      <div class="extended-submenu-prod" style="display:none">
        <ul class="subnav clearfix listitems autosort">
          {% for tag in tags %}
          {% if current_tags contains tag %}
          <li class="active" data-position="{{ tag }}">{{ tag | link_to_remove_tag: tag }}</li>
          {% elsif collection.all_tags contains tag %}
          <li data-position="{{ tag }}">{{ tag | link_to_add_tag: tag }}</li>
          {% endif %}
          {% endfor %}
        </ul>
      </div>
	  {% endif %}








      {% comment %} filters by price {% endcomment  %}


      {% assign tags = section.settings.tags_2 | split: ',' %}
      {% assign show-filter = false %}
      {% for tag in tags %}
      {% if collection.all_tags contains tag %}
      {% assign show-filter = true %}
      {% endif %}
      {% endfor %}
    {% if show-filter %}
      <div class="extend has_sub_menu" aria-haspopup="true" aria-expanded="false"><h3 class="bord_btm">Filter by Price</h3></div>
        <div class="extended-submenu-prod" style="display:none">
          <ul class="subnav clearfix listitems autosort">
            {% for tag in tags %}
            {% if current_tags contains tag %}
            <li class="active" data-position="{{ tag | remove: "£" | truncate: 4, "" }}">{{ tag | link_to_remove_tag: tag }}</li>
            {% elsif collection.all_tags contains tag %}
            <li data-position="{{ tag | remove: "£" | truncate: 4, "" }}">{{ tag | link_to_add_tag: tag }}</li>
            {% endif %}
            {% endfor %}
          </ul>
        </div>
    {% endif %}








      {% comment %}
      {% comment %} filters by type {% endcomment  %}

      {% assign tags = section.settings.tags_3 | split: ',' %}
      {% assign show-filter = false %}
      {% for tag in tags %}
      {% if collection.all_tags contains tag %}
      {% assign show-filter = true %}
      {% endif %}
      {% endfor %}
    {% if show-filter %}
      <div class="extend has_sub_menu" aria-haspopup="true" aria-expanded="false"><h3 class="bord_btm">Filter by Type</h3></div>
      <div class="extended-submenu-prod" style="display:none">
        <ul class="subnav clearfix listitems autosort">
          {% for tag in tags %}
          {% if current_tags contains tag %}
          <li class="active" data-position="{{ tag }}">{{ tag | link_to_remove_tag: tag }}</li>
          {% elsif collection.all_tags contains tag %}
          <li data-position="{{ tag }}">{{ tag | link_to_add_tag: tag }}</li>
          {% endif %}
          {% endfor %}
        </ul>
      </div>
    {% endif %}
    {% endcomment %}





    {% comment %} filters by style {% endcomment  %}
    {% assign tags = section.settings.tags_4 | split: ',' %}
    {% assign show-filter = false %}
    {% for tag in tags %}
    {% if collection.all_tags contains tag %}
    {% assign show-filter = true %}
    {% endif %}
    {% endfor %}

      {% if show-filter %}
      <div class="extend has_sub_menu" aria-haspopup="true" aria-expanded="false"><h3 class="bord_btm">Filter by Style</h3></div>
      <div class="extended-submenu-prod" style="display:none">
        <ul class="subnav clearfix listitems autosort">
          {% for tag in tags %}
          {% if current_tags contains tag %}
          <li class="active" data-position="{{ tag }}">{{ tag | link_to_remove_tag: tag }}</li>
          {% elsif collection.all_tags contains tag %}
          <li data-position="{{ tag }}">{{ tag | link_to_add_tag: tag }}</li>
          {% endif %}
          {% endfor %}
        </ul>
      </div>
      {% endif %}






      </div>





























    {% comment %} for testing
    <h2>Current tags</h2>
    {% for tag in collection.all_tags %}
    {% if current_tags contains tag %}
          <li class="active">{{ tag | link_to_remove_tag: tag }}</li>
    {% else %}
          <li>{{ tag | link_to_add_tag: tag }}</li>
    {% endif %}
	{% endfor %}

    {% endcomment %}


    {% comment %}
    Include block settings for collection template to add sidebar menus
    {% endcomment %}

    {% for block in section.blocks %}
     {% if block.type == 'vendor_list' %}
      {% if collection.handle == "all" %}
      <ul>
        <h2>{{ 'collections.general.shop_by_designer' | t }}</h2>
        {% for product_vendor in shop.vendors %}
        <li>{{ product_vendor | link_to_vendor  }}</li>
        {% endfor %}
      </ul>
      {% else %}
      <ul>
        <h2>{{ 'collections.general.shop_by_designer' | t }}</h2>
        {% for product_vendor in collection.all_vendors %}
        <li class="{{ product_vendor | handelize }}">{{ product_vendor | link_to_vendor }}</li>
        {% endfor %}
      </ul>
      {% endif %}
    {% else %}

    <ul class="sidebar-accordion" {{ block.shopify_attributes }}>
      <h2>{{ block.settings.title }}</h2>
      {% for link in linklists[block.settings.side_nav].links %}
        {% if link.links != blank %}
          <li class="extend has_sub_menu" aria-haspopup="true" aria-expanded="false">{{ link.title }}</li>
            <ul class="extended-submenu">
              {% for sub_link in link.links %}
                <li><a href="{{ sub_link.url }}">{{ sub_link.title }}</a></li>
              {% endfor %}
            </ul>

        {% else %}
          <li>{{ link.title | link_to: link.url }}</li>
          {% endif %}
      {% endfor %}
    </ul>

    {% endif %}

    {% endfor %}









  </div>

  <script>
    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]);
        }
      }
    }
    jQuery('#sort-by')
    .val('{{ collection.sort_by | default: collection.default_sort_by  }}')
         .bind('change', function() {
      Shopify.queryParams.sort_by = jQuery(this).val();
      location.search = jQuery.param(Shopify.queryParams);
    });





  $(".listitems.autosort").each(function(){
    $(this).html($(this).children('li').sort(function(a, b){
        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
    }));
});

    $('.desc-accordion').find('.extend').click(function(){
    //Expand or collapse this panel
    $(this).next().slideToggle('fast');
    //Hide the other panels
    $(".extended-submenu-prod").not($(this).next()).slideUp('fast');
  });



    $( ".extended-submenu-prod .active" ).clone().prependTo( "#inject_position" );


  </script>


  {% if section.settings.sticky-sidebar %}
  <script>

    if($(window).width() > 980){

      $('#sidebar').stickySidebar({

        sidebarTopMargin: 100,
        footerThreshold: 100

      });
    };




  </script>
  {% endif %}

</div>




<style>
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Subnavigation styles */
.subnav { clear: both; list-style-type: none; margin: 35px 0; padding: 0; }
.subnav li { display: block; float: left; }
.subnav li a {
  display: block;
  height: 28px;
  line-height: 28px;
  padding: 0 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;

  margin: 0 7px 7px 0;
  color: #383838;
  -webkit-transition: color 0.1s ease-in;
    -moz-transition: color 0.1s ease-in;
    -o-transition: color 0.1s ease-in;
    transition: color 0.1s ease-in;
}
.subnav li a:hover, .subnav li.active a {
  background: {{ settings.button_color}};
  color: #fff;
}

  .subnav li.active {background:transparent;}
  ul.subnav.clearfix.listitems.autosort {
    margin-top: 0;
}
</style>