<div class="shop-left-sidebar">
  <div class="back-button" (click)="closeCanvasMenu()">
    <h3>
      <a href="javascript:vois(0)" class="text-title">
        <i class="ri-close-fill"></i>
        <span>{{ 'back' | translate }}</span>
      </a>
    </h3>
  </div>
  <ng-content />
  <div class="filter-category">
    <app-collection-filter [filter]="filter" />
  </div>

  @if(attributeService.skeletonLoader){
  <app-skeleton-collection-sidebar />
  }@else {
  <div class="accordion custome-accordion" ngbAccordion>
    @if(!(hideFilter() && hideFilter()?.includes('category'))){
    <div class="accordion-item" ngbAccordionItem [collapsed]="false">
      <h2 class="accordion-header" ngbAccordionHeader>
        <button class="accordion-button" type="button" ngbAccordionButton>
          <span>{{ 'categories' | translate }}</span>
        </button>
      </h2>
      <div class="accordion-collapse collapse" ngbAccordionCollapse>
        <div class="accordion-body" ngbAccordionBody>
          <app-collection-category-filter [filter]="filter" />
        </div>
      </div>
    </div>
    } @if((brand$ | async)?.data?.length && !(hideFilter() && hideFilter()?.includes('brand'))){
    <div class="accordion-item" ngbAccordionItem [collapsed]="false">
      <h2 class="accordion-header" ngbAccordionHeader>
        <button class="accordion-button" ngbAccordionButton>
          <span>{{ 'brand' | translate }}</span>
        </button>
      </h2>
      <div ngbAccordionCollapse>
        <div class="accordion-body" ngbAccordionBody>
          <app-collection-brand-filter [filter]="filter" />
        </div>
      </div>
    </div>
    } @if(!filter['store_slug'] && !(hideFilter() && hideFilter()?.includes('attribute'))){
    @for(attribute of (attribute$ | async)?.data; track attribute){ @if(attribute.style !==
    'image'){
    <div class="accordion-item" ngbAccordionItem [collapsed]="false">
      <h2 class="accordion-header" ngbAccordionHeader>
        <button class="accordion-button" ngbAccordionButton>
          <span>{{ attribute.name }}</span>
        </button>
      </h2>
      <div ngbAccordionCollapse>
        <div class="accordion-body" ngbAccordionBody>
          <app-collection-attributes-filter [filter]="filter" [attribute]="attribute" />
        </div>
      </div>
    </div>
    } } } @if(!(hideFilter() && hideFilter()?.includes('price'))){
    <div class="accordion-item" ngbAccordionItem [collapsed]="false">
      <h2 class="accordion-header" ngbAccordionHeader>
        <button class="accordion-button" ngbAccordionButton>
          <span>{{ 'price' | translate }}</span>
        </button>
      </h2>
      <div ngbAccordionCollapse>
        <div class="accordion-body" ngbAccordionBody>
          <app-collection-price-filter [filter]="filter" />
        </div>
      </div>
    </div>
    } @if(!(hideFilter() && hideFilter()?.includes('rating'))){
    <div class="accordion-item" ngbAccordionItem [collapsed]="false">
      <h2 class="accordion-header" ngbAccordionHeader>
        <button class="accordion-button" ngbAccordionButton>
          <span>{{ 'rating' | translate }}</span>
        </button>
      </h2>
      <div ngbAccordionCollapse>
        <div ngbAccordionBody>
          <div class="accordion-body" ngbAccordionBody>
            <app-collection-rating-filter [filter]="filter" />
          </div>
        </div>
      </div>
    </div>
    }
  </div>
  }
</div>
