<mat-card class="x-centered mt-5">
  <mat-card-header>
    <mat-card-title>{{title}}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div *ngIf="unknownError || customError" class="alert alert-danger">
      <p *ngIf="unknownError">Une erreur est survenue</p>
      <p *ngIf="customError">{{customError}}</p>
    </div>

    <form *ngIf="form" [formGroup]="form">
      <ng-container *ngFor="let field of formFields">
        <ng-container
          *ngIf="field.type != 'checkbox' && field.type != 'select' && field.type != 'file'"
          [ngTemplateOutlet]="fieldTemplate"
          [ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
        </ng-container>
        <ng-container
          *ngIf="field.type == 'checkbox'"
          [ngTemplateOutlet]="checkboxTemplate"
          [ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
        </ng-container>
        <ng-container
          *ngIf="field.type == 'select'"
          [ngTemplateOutlet]="selectTemplate"
          [ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
        </ng-container>
        <ng-container
          *ngIf="field.type == 'file'"
          [ngTemplateOutlet]="fileTemplate"
          [ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
        </ng-container>
      </ng-container>
    </form>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary" [routerLink]="backButtonLink">Retour</button>
    <button mat-raised-button color="accent" [disabled]="form.invalid" (click)="submitForm()">Créer</button>
  </mat-card-actions>
</mat-card>

<ng-template
  #fieldTemplate
  let-control="control" let-field="field">
  <mat-form-field>
    <mat-label>{{field.label}}</mat-label>
    <input matInput [type]="field.type" [formControl]="control" [step]="field.step ? field.step : null"/>
    <mat-icon [svgIcon]="field.icon" matSuffix></mat-icon>
    <mat-error *ngIf="control.invalid && field.errorMessages">
      <ng-container *ngFor="let errorMessage of field.errorMessages">
        <span *ngIf="errorMessage.conditionFn(control.errors)">{{errorMessage.message}}</span>
      </ng-container>
    </mat-error>
  </mat-form-field>
</ng-template>

<ng-template
  #checkboxTemplate
  let-control="control" let-field="field">
  <mat-checkbox [formControl]="control">
    {{field.label}}
  </mat-checkbox>
</ng-template>

<ng-template
  #selectTemplate
  let-control="control" let-field="field">
  <mat-form-field *ngIf="field.options$ | async as options">
    <mat-label>{{field.label}}</mat-label>
    <mat-select [formControl]="control">
      <mat-option *ngFor="let option of options" [value]="option.value">
        {{option.label}}
      </mat-option>
    </mat-select>
    <mat-icon [svgIcon]="field.icon" matSuffix></mat-icon>
  </mat-form-field>
</ng-template>

<ng-template
  #fileTemplate
  let-control="control" let-field="field">
  <mat-form-field>
    <mat-label>{{field.label}}</mat-label>
    <ngx-mat-file-input [accept]="field.fileType" [formControl]="control"></ngx-mat-file-input>
  </mat-form-field>
</ng-template>
