<!-- Flex container -->
<div class="flex-container" *ngIf="isSearchActive">
  <!-- Search Input -->
  <mat-form-field appearance="outline" class="flex-item">
    <mat-label>Suche</mat-label>
    <input
      type="search"
      matInput
      [(ngModel)]="filteredValues.name"
      (ngModelChange)="applyNameFilter($event)"
    />
  </mat-form-field>

  <mat-form-field appearance="outline" class="flex-item">
    <mat-select
      [(value)]="scoreSelect.defaultValue"
      (selectionChange)="applyScoreFilter($event)"
    >
      <mat-option *ngFor="let op of scoreSelect.options" [value]="op">
        {{ op }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field appearance="outline" class="flex-item">
    <mat-label>Score</mat-label>
    <input
      type="number"
      min="0"
      matInput
      [(ngModel)]="filteredValues.score.value"
      (ngModelChange)="applyFilter()"
    />
  </mat-form-field>

  <mat-form-field appearance="outline" class="flex-item">
    <mat-label>{{ companySelect.name }}</mat-label>
    <mat-select
      [(value)]="companySelect.defaultValue"
      (selectionChange)="applySelectFilter($event)"
    >
      <mat-option *ngFor="let op of companySelect.options" [value]="op">
        {{ op }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
