<div [ngSwitch]="field.type" class="form-input-row">
  <ng-container *ngSwitchCase="'PLAIN_STRING'">
    <mat-form-field [ngClass]="{ virgin: !value }">
      <input
        autocomplete="off"
        matInput
        [placeholder]="placeholder"
        [(ngModel)]="value"
        (ngModelChange)="valueChanged()"
        (keydown.enter)="onEnterPressed($event)"
        [nmAutofocus]="autofocus"
      />
      <button
        mat-icon-button
        matSuffix
        aria-label="Clear"
        color="primary"
        *ngIf="value"
        (click)="resetValue($event)"
        tabIndex="-1"
      >
        <mat-icon color="primary" class="fade-in">close</mat-icon>
      </button>
    </mat-form-field>
  </ng-container>
  <ng-container *ngSwitchCase="'DATE'">
    <mat-form-field
      class="nm-date-time-input"
      (click)="datepicker.open()"
      [ngClass]="{ virgin: !dateValue }"
    >
      <input
        matInput
        autocomplete="off"
        [placeholder]="placeholder"
        [owlDateTime]="datepicker"
        [(ngModel)]="dateValue"
        (ngModelChange)="dateChanged()"
        (keydown)="dateInputKeydown($event)"
      />
      <button
        mat-icon-button
        matSuffix
        aria-label="Clear"
        color="primary"
        *ngIf="value"
        (click)="resetDateValue($event)"
      >
        <mat-icon color="primary" class="fade-in">close</mat-icon>
      </button>
      <button
        mat-button
        matSuffix
        mat-icon-button
        aria-label="date_range"
        [owlDateTimeTrigger]="datepicker"
      >
        <mat-icon>event</mat-icon>
      </button>
    </mat-form-field>
    <owl-date-time pickerType="calendar" #datepicker></owl-date-time>
  </ng-container>

  <mat-form-field
    *ngSwitchCase="'LOOKUP'"
    class="{{ value ? 'with-clear-button' : '' }}"
    [ngClass]="{ virgin: !value }"
  >
    <mat-select
      [placeholder]="placeholder"
      [(value)]="value"
      (valueChange)="valueChanged()"
      (keydown.backspace)="resetDateValue($event)"
    >
      <mat-option>
        <ngx-mat-select-search
          [formControl]="filterCtrl"
          placeholderLabel="{{ 'placeholder.search' | translate }}"
          noEntriesFoundLabel="{{ 'select.no.options' | translate }}"
          (keydown.escape)="selectSearch.matSelect.focus()"
          #selectSearch
        ></ngx-mat-select-search>
      </mat-option>
      <mat-option *ngIf="!field.default"></mat-option>
      <mat-option
        *ngFor="let value of getLookups(field.lookupSource)"
        [value]="value.value"
        >{{ value.label }}</mat-option
      >
    </mat-select>
    <button
      mat-icon-button
      matSuffix
      aria-label="Clear"
      color="primary"
      *ngIf="value"
      (click)="resetDateValue($event)"
      tabIndex="-1"
    >
      <mat-icon color="primary" class="fade-in">close</mat-icon>
    </button>
  </mat-form-field>

  <mat-form-field *ngSwitchCase="'MENU'" class="nm-formfiled-menu">
    <mat-select
      *ngIf="value"
      [placeholder]="placeholder"
      [(value)]="value"
      (valueChange)="valueChanged()"
    >
      <mat-select-trigger>
        <mat-icon
          [svgIcon]="getIconForSearchMode(value, field.lookupSource)"
        ></mat-icon>
      </mat-select-trigger>
      <mat-option *ngIf="!field.default"></mat-option>
      <mat-option
        *ngFor="let value of getLookups(field.lookupSource)"
        [value]="value.value"
      >
        <mat-icon
          [svgIcon]="getIconForSearchMode(value.value, field.lookupSource)"
        ></mat-icon>
        {{ value.label }}</mat-option
      >
    </mat-select>
  </mat-form-field>

  <mat-form-field *ngSwitchCase="'MULTI_LOOKUP'" [ngClass]="{ virgin: !value }">
    <mat-select
      [placeholder]="placeholder"
      multiple
      [(value)]="value"
      (valueChange)="valueChanged()"
      (keydown.backspace)="resetValue($event)"
    >
      <mat-select-trigger *ngIf="true">
        <nm-chip-list-trigger
          [lookupOptions]="getLookups(field.lookupSource)"
          [selection]="value"
          (selectionChanged)="externalValueChanged($event)"
        ></nm-chip-list-trigger>
      </mat-select-trigger>
      <mat-option>
        <ngx-mat-select-search
          [formControl]="filterCtrl"
          placeholderLabel="{{ 'placeholder.search' | translate }}"
          noEntriesFoundLabel="{{ 'select.no.options' | translate }}"
          (keydown.escape)="selectSearch.matSelect.focus()"
          #selectSearch
        ></ngx-mat-select-search>
      </mat-option>
      <mat-option
        *ngFor="let value of getLookups(field.lookupSource)"
        [value]="value.value"
        >{{ value.label }}</mat-option
      >
    </mat-select>
    <button
      mat-icon-button
      matSuffix
      aria-label="Clear"
      color="primary"
      *ngIf="value"
      (click)="resetValue($event)"
    >
      <mat-icon color="primary" class="fade-in">close</mat-icon>
    </button>
  </mat-form-field>

  <nm-category-select-control
    *ngSwitchCase="'CATEGORY'"
    [placeholder]="placeholder"
    [value]="value"
    (change)="valueChanged($event)"
    localStorageRecovery="false"
  ></nm-category-select-control>

  <div *ngSwitchDefault>
    {{ field | json }}
  </div>
</div>