<form class="filter-results filter-results_desktop">
  <div class="filter-results__heading">
    <div class="flex">
      <span class="heading-4">{{#unless filterTitle}}Filter by{{/unless}}{{filterTitle}}</span>
      <button type="reset" class="filter-results__clear" value="Clear all">Clear all</button>
    </div>
    {{#unless filterTitle}}
      <div class="sort-products-list__total">
        <span class="product-count">{{plp_load-more.pagination.totalNumberOfResults}}</span> <span>results</span>
      </div>
    {{/unless}}
  </div>
  <div class="accordions">
    {{#extend "accordion" header="Color Family" mod="filter" facetStep="5"}}
      {{#content "content"}}
        {{#each filters.colors}}
          <div class="filter__item">
            <label for="{{id}}" class="chb chb-color">
              <input type="checkbox" value="{{label}}" id="{{id}}" name="{{id}}-filter">
              <ins><i class="fas fa-check"></i></ins>
              <span>{{label}}</span>
            </label>
          </div>
        {{/each}}
      {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by category" mod="filter category-filter" fixed-height=""}}
      {{#content "content"}}
        {{>category-tree filters}}
      {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by pack quantity" mod="filter" facetStep="5"}}
      {{#content "content"}}
      {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by type" mod="filter" facetStep="5"}}
      {{#content "content"}}
        {{#each filters.type-list}}
          <div class="filter__item">
            <label for="{{id}}" class="chb chb-{{classForGtm}}">
              <input type="checkbox" value="{{value}}" id="{{id}}"
                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
              <ins><i class="fas fa-check"></i></ins>
              <span>{{label}}</span>
              <span class="filter-quantity">({{quantity}})</span>
            </label>
          </div>
        {{/each}}
      {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by type 2" mod="filter" facetStep="5"}}
      {{#content "content"}}
        {{#each filters.type-list2}}
          <div class="filter__item">
            <label for="{{id}}" class="chb chb-{{classForGtm}}">
              <input type="checkbox" value="{{value}}" id="{{id}}"
                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
              <ins><i class="fas fa-check"></i></ins>
              <span>{{label}}</span>
              <span class="filter-quantity">({{quantity}})</span>
            </label>
          </div>
        {{/each}}
      {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by type 3" mod="filter" facetStep="5"}}
      {{#content "content"}}
        {{#each filters.type-list3}}
          <div class="filter__item">
            <label for="{{id}}" class="chb chb-{{classForGtm}}">
              <input type="checkbox" value="{{value}}" id="{{id}}"
                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
              <ins><i class="fas fa-check"></i></ins>
              <span>{{label}}</span>
              <span class="filter-quantity">({{quantity}})</span>
            </label>
          </div>
        {{/each}}
      {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Customer Rating" mod="filter" facetStep="5"}}
      {{#content "content"}}
        {{#each filters.rated}}
          <div class="filter__item">
            {{#ifvalue quantity value='0'}}
            {{else}}
              <label for="{{id}}" class="chb chb-{{classForGtm}}">
                <input type="checkbox" value="{{value}}" id="{{id}}"
                       name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
                <ins><i class="fas fa-check"></i></ins>
                <div class="filter__reviews">
                  <div class="product-rating">
                    <div class="rating-bg">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <div class="rating-overlay" data-rating="{{#if rating}}{{rating}}{{else}}0{{/if}}">
                              <span class="star-overlay">
                                <i class="fa fa-star" aria-hidden="true"></i>
                              </span>
                        <span class="star-overlay">
                                <i class="fa fa-star" aria-hidden="true"></i>
                              </span>
                        <span class="star-overlay">
                                <i class="fa fa-star" aria-hidden="true"></i>
                              </span>
                        <span class="star-overlay">
                                <i class="fa fa-star" aria-hidden="true"></i>
                              </span>
                        <span class="star-overlay">
                                <i class="fa fa-star" aria-hidden="true"></i>
                              </span>
                      </div>
                    </div>
                    ({{quantity}})
                  </div>
                </div>
              </label>
            {{/ifvalue}}
          </div>
        {{/each}}
      {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by bulb shape" mod="filter" facetStep="5"}}
      {{#content "content"}}
      {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by number of gangs" mod="filter" facetStep="5"}}
      {{#content "content"}}
      {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by bulb fitting" mod="filter" facetStep="5"}}
      {{#content "content"}}
      {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by wattage" mod="filter" facetStep="5"}}
      {{#content "content"}}
      {{/content}}
    {{/extend}}
  </div>
</form>
