<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      class="fl-content fl-content-min-height" layoutDirection="column" [formGroup]="flavorPropertiesForm">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="flavorPropertiesForm"></app-form-errors>
  <div formArrayName="properties" *ngFor="let item of formProperties['controls']; let i = index;">
    <div [formGroupName]="i" layoutDirection="row" appLayoutGap="10px">
      <mat-form-field appFlex="100">
        <mat-label i18n>Key</mat-label>
        <input matInput formControlName="key" placeholder="Key" i18n-placeholder type="text" required>
        <mat-error>{{item.controls.key.errors | errorFormatter}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="100">
        <mat-label i18n>Value</mat-label>
        <input matInput formControlName="value" placeholder="Value" i18n-placeholder type="text">
        <mat-error>{{item.controls.value.errors | errorFormatter}}</mat-error>
      </mat-form-field>
      <div appFlex="100">
        <a class="add-item-button fl-margin-top-small" mat-mini-fab color="primary"
                (click)="deletePropertyFromList(i)">
          <mat-icon>delete</mat-icon>
        </a>
      </div>
    </div>
  </div>
  <div class="fl-margin-top">
    <button class="add-item-button vertical-align-middle" mat-mini-fab color="primary" (click)="addPropertyToList()">
      <mat-icon>add</mat-icon>
    </button>
    <span class="fl-margin-left-small" i18n>Add flavor property</span>
  </div>
</form>
