{{#with kitchen-plp}}
  <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
    <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
      {{> kitchen/mobile-nav-item
              icon="fas fa-filter"
              title="Filter by"
              modalId="filterModal"
      }}
      {{> kitchen/mobile-nav-item
              icon="fas fa-sort-alt"
              title="Sort by"
              info="Relevance"
              dropdown=true
              isKitchenMode=true
      }}
    </div>
    <div class="container">
      <div class="plp-filters__bar plp-filters__bar-desktop" role="tablist" aria-label="Filters">
        {{#each filters}}
          <div class="plp-filters__group" data-filter="{{name}}">
            <button
                    class="plp-filters__toggle"
                    type="button"
                    role="tab"
                    aria-expanded="false"
                    aria-controls="panel-{{@index}}"
                    id="tab-{{@index}}"
            >
              <i class="plp-filters__chevron fa fa-chevron-down" aria-hidden="true"></i>
              <span class="plp-filters__toggle-text">{{name}}</span>
              <span class="plp-filters__badge">
                <span></span>
              </span>
            </button>

            <div
                    class="plp-filters__panel {{type}}"
                    id="panel-{{@index}}"
                    role="tabpanel"
                    aria-labelledby="tab-{{@index}}"
            >
              {{> kitchen/filter-option }}
              <hr/>
              <button class="btn btn-primary plp-filters__apply">
                <span class="btn__text">View Results</span>
              </button>
            </div>
          </div>
        {{/each}}
      </div>
    </div>
  </div>
  {{> kitchen/chips mod="desktop"}}
  <div class="container result">
    {{> kitchen/result }}
    {{> kitchen/sort-by }}
  </div>
{{/with}}