<nav class="mobile-results-nav__top-nav"><button class="mobile-results-nav__close-btn"><svg fill="#111" viewBox="0 0 24 24"><path d="M12 0C9.813 0 7.8.533 5.96 1.6A11.793 11.793 0 0 0 1.6 5.96C.533 7.8 0 9.813 0 12s.533 4.2 1.6 6.04a11.793 11.793 0 0 0 4.36 4.36C7.8 23.467 9.813 24 12 24s4.2-.533 6.04-1.6a11.793 11.793 0 0 0 4.36-4.36C23.467 16.2 24 14.187 24 12s-.533-4.2-1.6-6.04a11.793 11.793 0 0 0-4.36-4.36C16.2.533 14.187 0 12 0zm5.2 15.28l-1.92 1.92L12 13.84 8.72 17.2 6.8 15.28 10.16 12 6.8 8.72 8.72 6.8 12 10.08l3.28-3.28 1.92 1.92L13.92 12l3.28 3.28z"></path></svg></button></nav> 
{% if collection.all_tags.size > 0 and section.settings.sb_filters != 'none' %}
  <div class="sb-widget filter-sidebar no-sidebar {{ section.settings.sb_filters_style }}">
    <h2 class="shop_filter_title">Shop By Filter:</h2>
    
    {% assign filtercount = 0 | plus:0 %}
    <div class="sb-filter-wrapper">
      {% comment %} -- filter by group -- {% endcomment %}
     
        {% assign _prefix_group = section.settings.group_filter_prefix | split: ',' %}
     
        {% assign _count = 0 %}
        {% for prefix in _prefix_group %}
          {% assign my_prefix = prefix | downcase | strip | append: '_+++' %}
          {% assign _prefix_new_str = _prefix_new_str | append: my_prefix  %}
        {% endfor %}
        {% assign _prefix_group = _prefix_new_str | split: '+++' %}
        {% if template contains 'collection' and collection.all_tags.size > 0 %}
          {% assign c = 0 %}
          {% for t in collection.all_tags %}
            {% capture cat %}{{ cat }}{% capture temp_cat %}{% if t contains '_' %}{% assign cat_grp = t | split: '_' %}{{ cat_grp.first }}{% endif %}{% endcapture %}{% unless cat contains temp_cat %}{% if t contains '_' %}{% assign new_cat_grp = t | split: '_' %}{{ new_cat_grp.first }}{% endif %}{% unless forloop.last %}+{% endunless %}{% assign c = c | plus: 1 %}{% endunless %}{% endcapture %}
          {% endfor %}
          {% assign cat_array = cat | split: '+' %}
        {% endif %}
      
        <div class="sbw-filter">
          
          <div class="filter__widget">
            {% comment %}
            Loop through tag categories
            {% endcomment %}
            {% assign i = 0 %}
            {% for cat_item in cat_array %}
              {% assign i = i | plus: 1 %}
              {% assign cat_item_plus = cat_item | downcase | append: '_' %}
              {% comment %}
              Ignore if tag category is empty
              {% endcomment %}
              {% unless cat_item == '' %}
                {% if _prefix_group contains cat_item_plus %} 
            
                  <div class="sb-filter {{ cat_item | downcase }}" id="filter-{{ i }}">
                    <div class="sbf-title">
                      <span>{{ cat_item }}</span>
<!--                       <i class="fa plus">+</i> -->
               <!--  <a href="javascript:void(0);" class="clear-filter hidden" id="clear-filter-{{ i }}" style="float: right;">Clear</a> -->
                    </div>
                    {% capture ci %}{{ cat_item | downcase }}{% endcapture %}
                    <ul class="advanced-filters{% if ci == 'color' %} list-inline afs-color{% endif %}{% if ci == 'review' %} list-inline afs-review{% endif %}">
                      {% comment %}
                      Loop through collection tags
                      {% endcomment %}
                      {% if ci == 'size' %}
                        <li class="advanced-filter rt size-all hidden" data-group="{{ cat_item }}"></li>
                      {% endif %}
                      {% for custom_tag in collection.all_tags %}
                        {% if custom_tag contains cat_item %}
                          {% comment %}
                          Strip out tag category prefix and add/remove link for tag filtering
                          {% endcomment %}  
                          {% assign file_extension = 'png' %}
                          {% assign value = custom_tag | remove_first: cat_item | remove: '_' %}
                          {% if current_tags contains custom_tag %}
                      		{% assign filtercount = filtercount | plus:1 %}
                            {% if ci == 'color' %}
                            <li class="active-filter advanced-filter af-color {{ custom_tag | handleize }}" data-group="{{ cat_item }}" data-handle="{{ custom_tag | handleize }}" data-handle="{{ custom_tag | handleize }}">
                              <div class="icon_af_color" style="background-color:{{ value | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }});"></div>
                              {{ custom_tag | remove_first: cat_item | remove: '_' | link_to_remove_tag: custom_tag | replace: 'tag Color_', '' }}
                            </li>
                      		{% elsif ci == 'review' %}
                      		  <li class="checkcontainer active-filter af-review advanced-filter rt{% if ci == 'size' %} size-{{ value | handleize }}{% endif %}" data-group="{{ cat_item }}" data-handle="{{ custom_tag | handleize }}">
                                <div class="icon_af_review" style="background-image: url({{ value | handle | append: 'star.' | append: file_extension | asset_url }});">
                                  {{ custom_tag | remove_first: cat_item | remove: '_' | link_to_remove_tag: custom_tag | replace: 'tag Color_', '' }}
                                </div>
                              </li>
                            {% else %}
                              <li class="checkcontainer active-filter advanced-filter rt{% if ci == 'size' %} size-{{ value | handleize }}{% endif %}" data-group="{{ cat_item }}" data-handle="{{ custom_tag | handleize }}">
                                {{ custom_tag | remove_first: cat_item | remove: '_' | link_to_remove_tag: custom_tag }}
                                <input type="checkbox" checked="checked">
  								<span class="checkmark"></span>
                              </li>
                            {% endif %}
                          {% else %}
                            {% if ci == 'color' %}
                              <li class="advanced-filter af-color {{ custom_tag | handleize }}" data-group="{{ cat_item }}" data-handle="{{ custom_tag | handleize }}">
                                <div class="icon_af_color" style="background-color:{{ value | handle }};"></div>
                               {{ custom_tag | remove_first: cat_item | remove: '_' | link_to_add_tag: custom_tag | replace: 'Narrow selection to products matching tag Color_', '' }}
                              </li>
                      		{% elsif ci == 'review' %}
                              <li class="checkcontainer af-review advanced-filter rt{% if ci == 'size' %} size-{{ value | handleize }}{% endif %}" data-group="{{ cat_item }}" data-handle="{{ custom_tag | handleize }}">
                                <div class="icon_af_review {{custom_tag}}"  style="background-image: url({{ value | handle | append: 'star.' | append: file_extension | asset_url }});"> 
                                  {{ custom_tag | remove_first: cat_item | remove: '_' | link_to_add_tag: custom_tag | replace: 'Narrow selection to products matching tag Color_', '' }}<p class="end_up">& up<p/>
                                </div>
                              </li>
                            {% else %}
                              <li class="checkcontainer advanced-filter rt{% if ci == 'size' %} size-{{ value | handleize }}{% endif %}" data-group="{{ cat_item }}" data-handle="{{ custom_tag | handleize }}">
                                {{ custom_tag | remove_first: cat_item | remove: '_' | link_to_add_tag: custom_tag }}
                                <input type="checkbox" checked="checked">
  								<span class="checkmark"></span>
                              </li>
                            {% endif %}
                          {% endif %}
                        {% endif %}
                      {% endfor %}
                    </ul>
                  </div>
                {% endif %}
              {% endunless %}
            {% endfor %}
          </div>
        </div>
      {% comment %} -- filter by tag -- 
      {% else %}
        <div class="sb-tag">
          <ul class="list-unstyled sb-filter-tag">
            {% unless current_tags %}
              <li class="active first"><span>All Items</span></li>
            {% else %}
              {% if collection.handle %}
                {% capture collection_url %}/collections/{{ collection.handle }}{% unless collection.sort_by == blank %}?sort_by={{ collection.sort_by }}{% endunless %}{% endcapture %}
              {% endif %}
              <li class="first">
                <a href="{{ collection_url }}"><span>All Items</span></a>
              </li>
            {% endunless %}
            {% for tag in collection.all_tags %}
              {% if current_tags contains tag %}
                <li class="active{% if forloop.length == forloop.index %} last{% endif %}">
                  <span>{{ tag }}</span>
                </li>
              {% else %}
                <li {% if forloop.length == forloop.index %}class="last"{% endif %}>
                  <a href="/collections/{% if collection.handle.size > 0 %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}">
                    <span>{{ tag }}</span>
                  </a>
                </li>
              {% endif %}
            {% endfor %}
          </ul>     
        </div>
      {% endif %} {% endcomment %}
    </div>
    {% if section.settings.cate_banner != blank %}
    <div class="nav_bar_banner">
      <a href="{{ section.settings.cate_banner_url }}" class="cate_banner"><img class="lazyload" data-src="{{ section.settings.cate_banner | img_url: 'master' }}" alt="" /></a>
    </div>
    {% endif %}
    {% if section.settings.bottom_banner != blank %}
   <div class="bottom_banner">
     {% if section.settings.bottom_banner != blank %}
     	<img class="lazyload" data-src="{{ section.settings.bottom_banner | img_url: 'master' }}" alt="" />
     {% endif %}
     <div class="banner_content">
       {% if section.settings.banner_title != blank %}
       	<h2>{{ section.settings.banner_title }}</h2>
       {% endif %}
       {% if section.settings.btn != blank %}
       	<a href="{{ section.settings.btn_url }}">{{ section.settings.btn }}</a>
       {% endif %}
     </div>
    </div>
   {% endif %}
    <div class="bottom_btn_filter">
      <a class="clear_filter_bottom" href="{{collection.url}}">Clear ({{filtercount}})</a>
      <a class="apply_filter_bottom">Apply</a>
    </div>
    
  </div>
{% endif %}


<script>
$(document).ready(function() {      
  $('.advanced-filter').each(function() {
    var el = $(this),group = el.data('group');
    if (el.hasClass('active-filter') ) { //Remove class hidden
      el.parents('.sb-filter').find('a.clear-filter').removeClass('hidden');
    }
  });

  $('.checkcontainer').on('click', function(e) {
    $(this).toggleClass("active-filter");
  })
  
  $('.filter-sidebar .filter__widget .sbf-title').on('click', function(e) {
    $(this).toggleClass("active");
    $(this).next(".advanced-filters").slideToggle();
  })
  
  
  if ($(window).width() < 990){
    $(".bottom_btn_filter").show();
    $('.advanced-filter a').on('click', function(e) {
      e.preventDefault();
    })
    
    $('.filter__widget .af-color').on('click', function(e) {
      $(this).toggleClass("active-filter");
    })
    
    $(".apply_filter_bottom").on('click',function(e){
      var tagsurl = "";
      var $divlength = $(".filter__widget .active-filter").length;
      $(".filter__widget .active-filter").each(function(index){
        if(index == $divlength-1){
          tagsurl = tagsurl.concat($(this).attr("data-handle"));
        }else{
          tagsurl = tagsurl.concat($(this).attr("data-handle")+"+");
        }
      })
      var $collectionurl = "{{collection.url}}/"+tagsurl;
      console.log($collectionurl);
      window.location = $collectionurl;

    })
    
  }else{
    $(".bottom_btn_filter").hide();
    $('.advanced-filter').on('click', function(e) {
      var el = $(this),group = el.data('group'),url = el.find('a').attr('href');

      // Continue as normal if we're clicking on the active link
      if ( el.hasClass('active-filter') ) {
        return;
      }
      var _logic = $(".filters-sidebar").data('logic');
      if( _logic ){
        // Get active group link (unidentified if there isn't one)
        activeTag = $('.active-filter[data-group="'+ group +'"]');

        // If a tag from this group is already selected, remove it from the new tag's URL and continue
        if ( activeTag && activeTag.data('group') === group ) {
          e.preventDefault();
          activeHandle = activeTag.data('handle') + '+';

          // Create new URL without the currently active handle
          url = url.replace(activeHandle, '');

          window.location = url;
        }
      }
    });
    
  }
  
});

</script>


<!-- <script type="text/javascript">  
  $(document).ready(function(){  
    $(".sidebar .sb-widget .sb-filter-wrapper .filter__widget .sb-filter:nth-child(1)").addClass('active');
      $(".sidebar .sb-widget .sb-filter-wrapper .filter__widget .sb-filter .sbf-title").on('click touchstart', function(){  
       $(this).parent(".sb-filter").find(".advanced-filters").slideToggle();
         
          //$(this).next(".advanced-filters").slideUp(); 
      });  
  });  
</script>
 -->