<form [formGroup]="customFieldsForm">
  <div *ngFor="let category of fieldCategories; let i = index;">
    <p *ngIf="category.name">
      <a (click)="toggleCategory(i)" class="active-link">{{ category.name }}</a>
    </p>
    <div *ngIf="!category.collapsed || !category.name">
      <div *ngFor="let item of category.fields">
        <div *ngIf="item.fieldType === 'input' && item.visible" layoutDirection="column">
          <mat-form-field>
            <mat-label>{{ item.label }}</mat-label>
            <input matInput name="{{item.name}}" [formControlName]="item.name"
                   [required]="item.required" *ngIf="item.type === 'text'">
            <input type="password" matInput
                   name="{{item.name}}" [formControlName]="item.name"
                   [required]="item.required" *ngIf="item.type === 'password'">

            <input type="email" matInput name="{{item.name}}" [formControlName]="item.name"
                   [required]="item.required" *ngIf="item.type === 'email'">

            <input type="number" matInput name="{{item.name}}" [formControlName]="item.name"
                   [required]="item.required" *ngIf="item.type === 'int'" step="1">

            <input type="number" matInput name="{{item.name}}" [formControlName]="item.name"
                   [required]="item.required" *ngIf="item.type === 'decimal'"
                   step="0.01">

            <textarea cols="1" rows="8"
                      matInput
                      [formControlName]="item.name"
                      name="{{item.name}}"
                      [required]="item.required"
                      *ngIf="item.type === 'textarea'"></textarea>
            <mat-error>{{ customFieldsForm.controls[item.name].errors | errorFormatter }}</mat-error>
          </mat-form-field>
        </div>
        <mat-form-field *ngIf="item.fieldType === 'select' && item.visible" class="full-width">
          <mat-label>{{ item.label }}</mat-label>
          <mat-select [formControlName]="item.name" [required]="item.required">
            <mat-option *ngFor="let option of item.choices" [value]="option.value">
              {{ option.label }}
            </mat-option>
          </mat-select>
          <mat-error i18n>This field is required!</mat-error>
        </mat-form-field>
        <div *ngIf="item.fieldType === 'autocomplete' && item.visible" class="full-width">
          <app-autocomplete [control]="customFieldsForm.controls[item.name]"
                            [placeholderSelected]="item.label"
                            [placeholderUnselected]="item.label"
                            [displayFn]="itemDisplay(item)"
                            [optionValueFn]="optionValueFn"
                            [switchMapHandler]="itemSwitchMapHandler(item)"></app-autocomplete>
        </div>
        <mat-radio-group *ngIf="item.fieldType === 'radio-group' && item.visible"
                         [formControlName]="item.name">
          <mat-radio-button *ngFor="let option of item.choices" class="fl-block" [color]="'primary'"
                            [value]="option.value">
            {{ option.label }}
          </mat-radio-button>
        </mat-radio-group>
        <div *ngIf="item.fieldType === 'check' && item.visible">
          <mat-checkbox [formControlName]="item.name" color="primary">
            <span [innerHTML]="item.label"></span>
          </mat-checkbox>
        </div>
      </div>
    </div>
  </div>
</form>
