<div class="container" *ngIf="value">
  <div class="clear-all" *ngIf="showResetButton">
    <button class="isa-btn isa-btn-primary-link remove-all isa-pt-0 isa-pb-0 isa-pl-15 isa-pr-15" (click)="resetFilters()">
      {{ resetStrategy | filterResetWording }}
    </button>
  </div>

  <ng-container *ngFor="let filter of value">
    <ng-container *ngTemplateOutlet="optionTmpl; context: { $implicit: filter }"></ng-container>
  </ng-container>

  <ng-container [ngSwitch]="isCollapsed" *ngIf="items && items.length > collapsedStateNumberOfSelectedFiltersShown">
    <div class="expand c-pointer" *ngSwitchCase="true" (click)="updateCollapsed(false)">
      <span [class.isa-font-color-customer]="module === 'Customer'">Mehr</span>
      <lib-icon [name]="module === 'Customer' ? 'Arrow_More' : 'Arrow_More_Grey'" class="isa-mt-0"></lib-icon>
    </div>
    <div class="collapse c-pointer" *ngSwitchDefault (click)="updateCollapsed(true)">
      <lib-icon [rotateBackwards]="true" class="isa-mt-0 isa-ml-12" [name]="module === 'Customer' ? 'Arrow_More' : 'Arrow_More_Grey'">
      </lib-icon>
      <span [class.isa-font-color-customer]="module === 'Customer'">Weniger</span>
    </div>
  </ng-container>
</div>

<ng-template #optionTmpl let-filter>
  <div *ngIf="filter.selected" class="selected-filter" #filteredItem>
    <span class="filter-name">{{ filter.name }}</span>
    <lib-icon (click)="clearFilter(filter); (false)" [name]="module === 'Customer' ? 'close' : 'close-branch'"></lib-icon>
  </div>

  <ng-container *ngFor="let option of filter.options | checkAllChildOptionsSelected">
    <ng-container *ngTemplateOutlet="optionTmpl; context: { $implicit: option }"></ng-container>
  </ng-container>
</ng-template>
