<form (ngSubmit)="applyFiltering()">
  <mat-form-field class="filtering-input-width">
    <mat-label i18n>Record value</mat-label>
    <input type="text" [placeholder]="placeholder"
           cdkTrapFocus cdkTrapFocusAutoCapture
           matInput [formControl]="myControl"
           [matAutocomplete]="auto">
    <button *ngIf="myControl?.value && !myControl?.disabled" class="clear-autocomplete-button"
            mat-icon-button matSuffix aria-label="Clear" i18n-aria-label (click)="clearControl()">
      <mat-icon>close</mat-icon>
    </button>
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" autoActiveFirstOption>
      <mat-option *ngIf="loadingItems" disabled>
        <app-flashing-dots [classList]="['fl-margin-left']"></app-flashing-dots>
      </mat-option>
      <mat-option [class.hide]="loadingItems" (click)="onItemSelection(option)" *ngFor="let option of filteredItems" [value]="option">
        <span *ngIf="option.id">
          {{option[filterOption.itemsDisplayField]}} <span *ngIf="filterOption.itemsDisplaySecondaryField">({{option[filterOption.itemsDisplaySecondaryField]}})</span>
        </span>
        <span *ngIf="option.id === null" i18n>Filter items without related record</span>
      </mat-option>
      <div *ngIf="hasMore" [class.hide]="loadingItems" layoutDirection="column" layoutAlign="center center" class="fl-margin-bottom-small"
           (click)="loadMore()">
        <a mat-button i18n>Load more</a>
      </div>
    </mat-autocomplete>
  </mat-form-field>
</form>
<div><!--pushes checkbox on new line--></div>
<span [hidden]="filterOption.hideExclude">
  <mat-checkbox [(ngModel)]="exclude" [color]="'primary'" i18n>Exclude</mat-checkbox>
</span>
<div><!--pushes button on new line--></div>
<button class="fl-margin-top-medium" (click)="applyFiltering()" mat-flat-button i18n>
  Apply
</button>
