
<div class="d-flex justify-content-md-between align-items-md-center align-items-end flex-md-row w-100">

  <mat-checkbox
    *ngIf="checkBoxText"
    color="primary"
    class="mt-md-0 mt-1 me-3"
    [matTooltip]="checkBoxTooltip"
    [(ngModel)]="checked"
    (change)="filter()">
    {{checkBoxText}}
  </mat-checkbox>

  <mat-form-field
    class="w-100 standalone-field me-3"
    *ngIf="types?.length > 0">
    <span
      matPrefix
      matTooltip="Filter on type"
      class="d-flex flex-nowrap align-items-center justify-content-between me-2">
      <mat-icon>filter_list</mat-icon>
      <span class="text-muted ms-1">|</span>
    </span>
    <mat-select
      [(ngModel)]="type"
      (selectionChange)="filter(); typeChanged();"
      placeholder="Type ...">
      <mat-option [value]="null">
        Remove filter
      </mat-option>
      <mat-option
        *ngFor="let item of types"
        [value]="item">
        <span class="d-block name-line">{{item}}</span>
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field class="w-100 standalone-field">
    <span
      matPrefix
      matTooltip="Search for item(s)"
      class="d-flex flex-nowrap align-items-center justify-content-between me-2">
      <mat-icon>search</mat-icon>
      <span class="text-muted">|</span>
    </span>
    <input
      matInput
      placeholder="Search ..."
      [formControl]="filterControl"
      #input
      autocomplete="off">
    <button
      mat-icon-button
      matSuffix
      (click)="removeSearchTerm();"
      *ngIf="input.value !== ''">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>

  <button
    mat-flat-button
    *ngIf="buttonText || buttonIcon"
    color="primary"
    [disabled]="buttonDisabled"
    [matTooltip]="buttonTooltip"
    class="ms-3"
    (click)="buttonClicked()">
    <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon>
    {{buttonText}}
  </button>

  <button
    mat-flat-button
    *ngIf="button2Text"
    color="primary"
    [disabled]="button2Disabled"
    [matTooltip]="button2Tooltip"
    class="ms-3"
    (click)="button2Clicked()">
    {{button2Text}}
  </button>

  <button
    mat-flat-button
    *ngIf="button3Text"
    color="primary"
    [disabled]="button3Disabled"
    [matTooltip]="button3Tooltip"
    class="ms-3"
    (click)="button3Clicked()">
    {{button3Text}}
  </button>

  <button
    mat-flat-button
    *ngIf="button4Text"
    color="primary"
    [disabled]="button4Disabled"
    [matTooltip]="button4Tooltip"
    class="ms-3"
    (click)="button4Clicked()">
    {{button4Text}}
  </button>

</div>
