<mat-form-field appearance="outline" class="w-100">
  <button disabled mat-icon-button matPrefix>
    <ion-icon name="search-outline" />
  </button>
  <mat-chip-grid #chipList aria-label="Search keywords">
    @for (filter of selectedFilters; track filter) {
      <mat-chip-row
        class="mx-1 my-0 px-2 py-0"
        matChipRemove
        [removable]="true"
        (removed)="onRemoveFilter(filter)"
      >
        {{ filter.label | gfSymbol }}
        <button matChipRemove>
          <ion-icon name="close-outline" />
        </button>
      </mat-chip-row>
    }
    <input
      #searchInput
      name="close-outline"
      [formControl]="searchControl"
      [matAutocomplete]="autocomplete"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [placeholder]="placeholder"
      (matChipInputTokenEnd)="onAddFilter($event)"
    />
  </mat-chip-grid>
  <mat-autocomplete
    #autocomplete="matAutocomplete"
    (optionSelected)="onSelectFilter($event)"
  >
    @for (filterGroup of filterGroups$ | async; track filterGroup) {
      <mat-optgroup [label]="filterGroup.name">
        @for (filter of filterGroup.filters; track filter) {
          <mat-option [value]="filter.id">
            {{ filter.label | gfSymbol }}
          </mat-option>
        }
      </mat-optgroup>
    }
  </mat-autocomplete>

  <button
    disabled
    mat-icon-button
    matSuffix
    [ngClass]="{ 'd-none': !isLoading }"
  >
    <mat-spinner matSuffix [diameter]="20" />
  </button>
</mat-form-field>
