<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>
        <mat-option *ngFor="let type of types" [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>
        <mat-option *ngFor="let key of keys" [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>
        <mat-option *ngFor="let key of legalType" [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>
        <mat-option *ngFor="let flag of getFlags()" [value]="flag">{{
          flag
          }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <i>Anzahl der Suchergebnisse: {{ songs.length }}</i>
</div>
