<div class="filter-container" #filterContainer (window:resize)="onResize($event)">
  <ng-container *ngFor="let f of filterIndexArray$ | async; let index = index">
    <app-filter-item
      [ngStyle]="{ display: getFilterCalculatedIndex(index) < filterMoreLimit - 1 || showMore ? '' : 'none' }"
      [selectedFilterMode]="selectedFilterMode"
      [index]="index"
      (confirmed)="itemsConfirmed()"
    >
    </app-filter-item>
    <ng-container *ngFor="let filter of selectedFilters$(f.id) | async">
      <ng-container *ngFor="let filterItem of getSelectFilterItems(filter); let selectedIndex = index">
        <app-selected-filter-item
          [filter]="filter"
          [ngStyle]="{
            display: showMore || getFilteSelectedItemsCalculatedIndex(index, selectedIndex) < filterMoreLimit - 1 ? '' : 'none'
          }"
          [filterItem]="filterItem"
          [selectedFilterMode]="selectedFilterMode"
          (confirmed)="itemsDeletedConfirmed()"
        >
        </app-selected-filter-item>
      </ng-container>
    </ng-container>
  </ng-container>
  <div (click)="toggleMore()" *ngIf="numberOfFilters > filterMoreLimit" class="more-filters-container">
    <span class="more-filters">{{ showMore ? 'Weniger' : 'Mehr' }} Filter</span>
    <lib-icon
      name="Arrow_More"
      width="14px"
      ml="6px"
      transition="all 0.2s linear"
      [rotateBackwards]="showMore"
      [translateX]="showMore ? '-135px' : null"
    ></lib-icon>
  </div>
</div>
