<div [formGroup]="filterFormGroup">
  <mat-form-field appearance="outline">
    <mat-label>Titel oder Text</mat-label>
    <input formControlName="q" matInput />
  </mat-form-field>

  <div class="third">
    <mat-form-field appearance="outline">
      <mat-label>Typ</mat-label>
      <mat-select formControlName="type">
        <mat-option [value]="null">- kein Filter -</mat-option>
        @for (type of types; track type) {
        <mat-option [value]="type">{{ type | songType }} </mat-option>
        }
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Tonart</mat-label>
      <mat-select formControlName="key">
        <mat-option [value]="null">- kein Filter -</mat-option>
        @for (key of keys; track key) {
        <mat-option [value]="key">{{ key | key }} </mat-option>
        }
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Rechtlicher Status</mat-label>
      <mat-select formControlName="legalType">
        <mat-option [value]="null">- kein Filter -</mat-option>
        @for (key of legalType; track key) {
        <mat-option [value]="key">{{ key | legalType }} </mat-option>
        }
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Attribute</mat-label>
      <mat-select formControlName="flag">
        <mat-option [value]="null">- kein Filter -</mat-option>
        @for (flag of getFlags(); track flag) {
        <mat-option [value]="flag">{{ flag }} </mat-option>
        }
      </mat-select>
    </mat-form-field>
    @if (filterActive) {
      <app-button (click)="resetFilter()" [fullWidth]="true" [icon]="faResetFilter">Filter zurücksetzen</app-button>
    }
  </div>
</div>
