<nb-card #dialog accent="{{dialogData?.options[0].accentColor}}" class="project-dialog">
  <nb-card-header fxLayoutAlign="start center" class="dialog-header">
    {{ dialogData?.options[0].headerLabelKey | translate }}
  </nb-card-header>
  <nb-card-body>
    <form *ngIf="formArray" [formGroup]="projectFormGroup" fxLayout="column" fxLayoutGap="1rem"
          fxLayoutAlign="start start">
      <ng-template ngFor let-fieldConfig [ngForOf]="formArray">
        <!-- TYPE select -->
        <ng-container [ngSwitch]="fieldConfig.type">
          <!-- Default styles -->
          <nb-form-field *ngSwitchCase="'text'" class="project-form-field">
            <label for="{{fieldConfig.fieldName}}" class="label">
              {{fieldConfig.labelKey | translate}}
            </label>
            <input formControlName="{{fieldConfig.fieldName}}"
                   type="text" required fullWidth
                   id="{{fieldConfig.fieldName}}" nbInput
                   class="input"
                   [status]="projectFormGroup.get(fieldConfig.fieldName).dirty ? (projectFormGroup.get(fieldConfig.fieldName).invalid  ? 'danger' : 'basic') : 'basic'"
                   placeholder="{{fieldConfig.placeholder | translate}} *">
            <!-- FIXME: when the bug (https://github.com/angular/components/issues/7739) is fixed -->
            <ng-template ngFor let-error [ngForOf]="fieldConfig.errors"
                         *ngIf="projectFormGroup.get(fieldConfig.fieldName).dirty">
              <span class="error-text"
                    *ngIf="projectFormGroup.get(fieldConfig.fieldName)?.hasError(error.errorCode) && error.errorCode === 'required'">
                {{error.translationKey | translate}}
              </span>
            </ng-template>
          </nb-form-field>
        </ng-container>
      </ng-template>
    </form>
  </nb-card-body>
  <nb-card-footer fxLayout="row" fxLayoutGap="1.5rem" fxLayoutAlign="end end">
    <button nbButton status="success" size="small" class="dialog-button" [disabled]="!allowSave()"
            (click)="onClickSave(projectFormGroup.value)">
      {{ dialogData?.options[0].buttonKey | translate}}
    </button>
    <button nbButton status="danger" size="small" class="dialog-button" (click)="onClickClose()">
      {{ 'global.action.cancel' | translate }}
    </button>
  </nb-card-footer>
</nb-card>
