<div [ngSwitch]="field.type" class="form-input-row">
  <ng-container *ngSwitchCase="'PLAIN_STRING'">
    <mat-form-field [ngClass]="{ virgin: !value }">
      <mat-label *ngIf="floatingLabel">{{
        floatingLabel | translate
      }}</mat-label>
      <input
        autocomplete="off"
        matInput
        [placeholder]="placeholder"
        [(ngModel)]="value"
        (ngModelChange)="valueChanged()"
        (keydown.enter)="onEnterPressed($event)"
      />
      <button
        mat-icon-button
        matSuffix
        aria-label="Clear"
        color="primary"
        *ngIf="hasValue()"
        (click)="resetValue($event)"
      >
        <mat-icon color="primary" class="fade-in">close</mat-icon>
      </button>
    </mat-form-field>
  </ng-container>

  <ng-container *ngSwitchCase="'INTEGER_NUMBER'">
    <mat-form-field [ngClass]="{ virgin: !value }">
      <mat-label *ngIf="floatingLabel">{{
        floatingLabel | translate
      }}</mat-label>
      <input
        autocomplete="off"
        type="number"
        matInput
        [placeholder]="placeholder"
        [(ngModel)]="value"
        (ngModelChange)="valueChanged()"
        (keydown.enter)="onEnterPressed($event)"
        min="{{ field.min == null ? '' : field.min }}"
        max="{{ field.max == null ? '' : field.max }}"
      />
      <button
        mat-icon-button
        matSuffix
        aria-label="Clear"
        color="primary"
        *ngIf="hasValue()"
        (click)="resetValue($event)"
      >
        <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 }"
    >
      <mat-label *ngIf="floatingLabel">{{
        floatingLabel | translate
      }}</mat-label>
      <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="hasValue()"
        (click)="resetDateValue($event)"
        tabIndex="-1"
      >
        <mat-icon color="primary" class="fade-in">close</mat-icon>
      </button>
      <button
        mat-button
        matSuffix
        mat-icon-button
        aria-label="date_range"
        [owlDateTimeTrigger]="datepicker"
        tabIndex="-1"
      >
        <mat-icon>event</mat-icon>
      </button>
    </mat-form-field>
    <owl-date-time pickerType="calendar" #datepicker></owl-date-time>
  </ng-container>

  <ng-container *ngSwitchCase="'DATE_TIME'">
    <mat-form-field
      class="nm-date-time-input"
      (click)="datepicker.open()"
      [ngClass]="{ virgin: !dateValue }"
    >
      <mat-label *ngIf="floatingLabel">{{
        floatingLabel | translate
      }}</mat-label>
      <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="hasValue()"
        (click)="resetDateValue($event)"
        tabIndex="-1"
      >
        <mat-icon color="primary" class="fade-in">close</mat-icon>
      </button>
      <button
        mat-button
        matSuffix
        mat-icon-button
        aria-label="date_range"
        [owlDateTimeTrigger]="datepicker"
        tabIndex="-1"
      >
        <mat-icon>event</mat-icon>
      </button>
    </mat-form-field>
    <owl-date-time pickerType="both" #datepicker></owl-date-time>
  </ng-container>

  <mat-form-field *ngSwitchCase="'LOOKUP'" [ngClass]="{ virgin: !value }">
    <mat-label *ngIf="floatingLabel">{{ floatingLabel | translate }}</mat-label>
    <nm-combo
      class="combo"
      tabIndex="0"
      [options]="options | async"
      [valueKey]="'value'"
      [displayKey]="'label'"
      [clearable]="false"
      [filterPlaceholder]="'placeholder.search' | translate"
      [placeholder]="placeholder"
      [emptyOption]="field.default ? null : ''"
      [name]="'lookup'"
      [(ngModel)]="value"
      (ngModelChange)="valueChanged()"
    >
      <ng-template nmComboOption let-option>
        {{ option.label | translate }}
      </ng-template>

      <ng-template nmComboTrigger let-selection="selection">
        {{ selection[0]?.label | translate }}
      </ng-template>
    </nm-combo>

    <button
      mat-icon-button
      matSuffix
      aria-label="Clear"
      color="primary"
      *ngIf="hasValue()"
      (click)="resetDateValue($event)"
    >
      <mat-icon color="primary" class="fade-in">close</mat-icon>
    </button>
  </mat-form-field>

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

  <mat-form-field *ngSwitchCase="'MULTI_LOOKUP'" [ngClass]="{ virgin: !value }">
    <mat-label *ngIf="floatingLabel">{{ floatingLabel | translate }}</mat-label>
    <nm-combo
      class="combo"
      tabIndex="0"
      [options]="options | async"
      [valueKey]="'value'"
      [displayKey]="'label'"
      [filterPlaceholder]="'placeholder.search' | translate"
      [placeholder]="placeholder"
      [multiple]="true"
      [clearable]="hasValue()"
      [name]="'lookup'"
      [(ngModel)]="value"
      (ngModelChange)="externalValueChanged($event)"
      [trigger]="triggerAsChipList ? 'chips' : 'plain'"
    >
      <ng-template nmComboOption let-option>
        {{ option.label | translate }}
      </ng-template>
    </nm-combo>
  </mat-form-field>

  <nm-context-selector
    *ngSwitchCase="'CONTEXT'"
    tabIndex="0"
    [contexts]="options | async"
    [placeholder]="floatingLabel ? floatingLabel : (placeholder | translate)"
    [value]="value"
    field="identifier"
    (identifierChange)="valueChanged($event)"
  >
  </nm-context-selector>

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

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