<div class="isa-card">
  <div
    class="select-filter-actions"
    [class.scroll-shadow]="scrollPositionPersantage"
  >
    <button
      type="button"
      class="isa-btn isa-p-0 isa-font-weight-emphasis"
      [class.isa-font-color-customer]="module === 'Customer'"
      [class.isa-font-lightgrey]="module !== 'Customer'"
      *ngIf="!max"
      (click)="selectAll()"
    >
      {{ (allSelected$ | async) ? 'Alle entfernen' : 'Alle auswählen' }}
    </button>
  </div>
  <div class="select-filter-options isa-mt-10">
    <div
      class="select-filter-options-content"
      (scroll)="updateScrollButton()"
      #optionsContainer
      (cdkObserveContent)="updateScrollButton()"
    >
      <ng-container *ngFor="let option of options; let index = index">
        <app-select-filter-option
          [module]="module"
          [option]="option"
          (optionChanged)="optionChanged($event, index)"
        >
        </app-select-filter-option>
      </ng-container>
    </div>
  </div>
</div>

<button
  *ngIf="canScroll"
  class="scroll-btn isa-btn isa-btn-circle isa-btn-default-bg"
  [class.up]="scrollPositionPersantage >= 20"
  [class.down]="scrollPositionPersantage < 20"
  (click)="scroll()"
>
  <lib-icon
    width="18px"
    height="20px"
    mt="3px"
    [name]="module === 'Customer' ? 'Arrow_back' : 'Arrow_back_branch'"
  ></lib-icon>
</button>
