<div class="input-options-wrapper">
  <div class="hidden-overflow">
    <div class="input-options-header" [class.header-shadow]="scrollPersantage > 0">
      <button type="button" (click)="setSelected(undefined)">Alle entfernen</button>
      @if (!uiInputOptions?.max && (uiInputOptions?.parent?.type === 2 || uiInputOptions?.parent?.type === 4)) {
        <button
          type="button"
          (click)="setSelected(true)"
          >
          Alle auswählen
        </button>
      }
    </div>
  </div>
  <div class="input-options-wrapper">
    <p class="input-desription">
      {{ uiInputOptions?.parent?.description }}
    </p>
    @if (uiInputOptions?.parent?.type === 2 || uiInputOptions?.parent?.type === 4) {
      <div class="input-options" #inputOptionsConainter (scroll)="markForCheck()">
        @if (uiInputOptions?.parent?.type === 2) {
          @for (option of uiInputOptions?.values; track option) {
            <ui-input-option-bool
              [option]="option"
              (optionChange)="optionChange($event)"
            ></ui-input-option-bool>
          }
        }
        @if (uiInputOptions?.parent?.type === 4) {
          @for (option of uiInputOptions?.values; track option) {
            <ui-input-option-tri-state [option]="option"></ui-input-option-tri-state>
          }
        }
      </div>
      @if (scrollable) {
        <button class="cta-scroll" [class.up]="scrollPersantage > 20" (click)="scroll(20)">
          <ui-icon icon="arrow" size="20px"></ui-icon>
        </button>
      }
    }
    @if (uiInputOptions?.parent?.type === 128) {
      <ui-input-option-date-range
        [options]="uiInputOptions?.values"
      ></ui-input-option-date-range>
    }
    @if (uiInputOptions?.parent?.type === 4096) {
      <ui-input-option-number-range
        [options]="uiInputOptions?.values"
      ></ui-input-option-number-range>
    }
  </div>
</div>
