<div [ngClass]="{highlighted, 'is-disabled': disabled}" class="filter-group">
  <!--  disabled: {{ disabled }}-->

  @if(appState.filters){
    <div class="selectors">
      <sae-multi-selector
        (availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')"
        (selectedChoicesChange)="onSelectedChoicesChange($event, 'engineType')"
        [actionTypes]="actionTypes"
        [availableChoices]="appState.filters?.engineType?.availableList"
        [disabled]="disabled"
        [label]="'Engine type'"
        [selectedChoices]="appState.filters?.engineType?.selectedList"
        [store]="store"
      ></sae-multi-selector>
      <sae-multi-selector
        (availableChoicesChange)="onAvailableChoicesChange($event, 'findings')"
        (selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')"
        [actionTypes]="actionTypes"
        [availableChoices]="appState.filters.findings.availableList"
        [label]="'Findings'"
        [selectedChoices]="appState.filters.findings.selectedList"
        [store]="store"
      ></sae-multi-selector>
      <sae-multi-selector
        (availableChoicesChange)="onAvailableChoicesChange($event, 'ata')"
        (selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')"
        [actionTypes]="actionTypes"
        [availableChoices]="appState.filters?.ata?.availableList"
        [label]="'ATA'"
        [selectedChoices]="appState.filters?.ata?.selectedList"
        [store]="store"
      ></sae-multi-selector>
      <sae-multi-selector
        (availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')"
        (selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')"
        [actionTypes]="actionTypes"
        [availableChoices]="appState.filters?.partNumber?.availableList"
        [label]="'Part number'"
        [selectedChoices]="appState.filters?.partNumber?.selectedList"
        [store]="store"
      ></sae-multi-selector>
      <sae-multi-selector
        (availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')"
        (selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')"
        [actionTypes]="actionTypes"
        [availableChoices]="appState.filters?.technicalManual?.availableList"
        [label]="'Technical Manual'"
        [selectedChoices]="appState.filters?.technicalManual?.selectedList"
        [store]="store"
      ></sae-multi-selector>
      <sae-multi-selector
        (availableChoicesChange)="onAvailableChoicesChange($event, 'onOffWing')"
        (selectedChoicesChange)="onSelectedChoicesChange($event, 'onOffWing')"
        [actionTypes]="actionTypes"
        [availableChoices]="appState.filters?.onOffWing?.availableList"
        [label]="'On-wing/off-wing'"
        [selectedChoices]="appState.filters?.onOffWing?.selectedList"
        [store]="store"
      ></sae-multi-selector>
    </div>

  }

  @if (!hideChipsList) {
    <div (click)="highlighted = !highlighted" class="chips-listing">
      <!--    liste de chips-->

      <div class="chips-column">
        @for (elem of appState.filters.engineType.selectedList; track elem.label) {
          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'engineType')">
            {{ elem.label }}
            <span class="post-button">
                   x
                 </span>
          </button>
        }
      </div>
      <div class="chips-column">
        @for (elem of appState.filters.findings.selectedList; track elem.label) {
          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'findings')">
            {{ elem.label }}
            <span class="post-button">
                   x
                 </span>
          </button>
        }
      </div>
      <div class="chips-column">
        @for (elem of appState.filters.ata.selectedList; track elem.label) {
          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'ata')">
            {{ elem.label }}
            <span class="post-button">
                   x
                 </span>
          </button>
        }
      </div>
      <div class="chips-column">
        @for (elem of appState.filters.partNumber.selectedList; track elem.label) {
          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'partNumber')">
            {{ elem.label }}
            <span class="post-button">
                   x
                 </span>
          </button>
        }
      </div>
      <div class="chips-column">
        @for (elem of appState.filters.technicalManual.selectedList; track elem.label) {
          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'technicalManual')">
            {{ elem.label }}
            <span class="post-button">
                   x
                 </span>
          </button>
        }
      </div>
      <div class="chips-column">
        @for (elem of appState.filters.onOffWing.selectedList; track elem.label) {
          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'onOffWing')">
            {{ elem.label }}
            <span class="post-button">
                   x
                 </span>
          </button>
        }
      </div>
    </div>
  }

</div>
