@if (!activeInput()) {
  <button
    class="rounded-t-[1.25rem] px-6 py-5 border-b border-isa-neutral-300 text-left text-isa-neutral-500 has-[.active]:text-isa-neutral-900"
    (click)="filter.clear()"
    type="button"
  >
    <span class="isa-text-body-2-bold" [class.active]="!filter.isEmpty()">
      Alle abwählen
    </span>
  </button>
  @for (filterInput of filterInputs(); track filterInput.key) {
    <button
      type="button"
      class="px-6 py-5 border-b border-isa-neutral-300 inline-flex items-center gap-2 justify-between"
      (click)="activeInput.set(filterInput)"
      data-which="filter-input-button"
      [attr.data-what]="filterInput.label"
    >
      <div class="flex items-start gap-1">
        <span class="text-isa-neutral-900 isa-text-body-2-regular">
          {{ filterInput.label }}
        </span>
        @if (!filter.isDefaultFilterInput(filterInput)) {
          <span
            class="bg-isa-accent-red size-[0.375rem] rounded-full inline-block mt-[0.125rem]"
          ></span>
        }
      </div>

      <ng-icon
        class="text-isa-neutral-900"
        name="isaActionChevronRight"
        size="1.5rem"
      ></ng-icon>
    </button>
  }
} @else {
  @let input = activeInput();
  <button
    class="flex justify-start items-center gap-2 rounded-t-[1.25rem] px-6 py-5 border-b border-isa-neutral-300 text-left text-isa-neutral-900 isa-text-body-2-regular"
    (click)="activeInput.set(undefined)"
    type="button"
  >
    <ng-icon name="isaActionChevronLeft" size="1rem"></ng-icon>
    <span> {{ input!.label }} </span>
  </button>

  <filter-input-renderer
    class="overflow-scroll"
    [filterInput]="input!"
  ></filter-input-renderer>
}

<filter-actions
  [inputKey]="activeInput()?.key"
  (applied)="applied.emit()"
  (reseted)="reseted.emit()"
></filter-actions>
