<form class="filter-results filter-results_mobile">
    <div class="filter-results__close-holder">
        <span class="icon filter-results__btn-close"><i class="far fa-times"></i></span>
    </div>
    <div class="filter-results__heading">
        <span class="heading-4">Filter results</span>
        <button type="reset" class="filter-results__clear" value="Clear all">Clear all</button>
    </div>
    <div class="filter-results__actions">
        <button class="btn btn-primary btn_full" id="close-overlay">
            <span class="btn__text">View results</span>
        </button>
    </div>
    {{#extend "accordion" header="Color Family" mod="filter"}}
      {{#content "content"}}
        {{#each filters.colors}}
          <div class="filter__item">
            <label for="m-{{id}}" class="chb chb-color">
              <input type="checkbox" value="{{label}}" id="m-{{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"}}
        {{#content "content"}}
        {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by type" mod="filter"}}
        {{#content "content"}}
            {{#each filters.type-list}}
                <div class="filter__item">
                    <label for="m-{{id}}" class="chb chb-{{classForGtm}}">
                        <input type="checkbox" value="{{value}}" id="m-{{id}}"
                               name="m-{{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"}}
        {{#content "content"}}
            {{#each filters.rated}}
            <div class="filter__item">
                {{#ifvalue quantity value='0'}}
                {{else}}
                <label 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"}}
        {{#content "content"}}
        {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by number of gangs" mod="filter"}}
        {{#content "content"}}
        {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by bulb fitting" mod="filter"}}
        {{#content "content"}}
        {{/content}}
    {{/extend}}
    {{#extend "accordion" header="Shop by wattage" mod="filter"}}
        {{#content "content"}}
        {{/content}}
    {{/extend}}


</form>
