<mat-card *ngIf="entity" class="mt-5 x-centered">
  <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 [formGroup]="form">
      <ng-container *ngFor="let field of formFields">
        <ng-container
          *ngIf="!field.template && 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 == 'select' && !field.template"
          [ngTemplateOutlet]="selectTemplate"
          [ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
        </ng-container>
        <ng-container
          *ngIf="field.type == 'file' && !field.template"
          [ngTemplateOutlet]="fileTemplate"
          [ngTemplateOutletContext]="{control: getControl(field.name), field: field}">
        </ng-container>
        <ng-container
          [ngTemplateOutlet]="field.template"
          [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="warn" *ngIf="canDelete" (click)="confirmBoxComponent.show()">Supprimer</button>
    <button mat-raised-button color="accent" [disabled]="form.invalid" (click)="submitForm()">Enregistrer</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"/>
    <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
  #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>


<cre-confirm-box #confirmBoxComponent [message]="deleteConfirmMessage" (confirm)="delete.emit()"></cre-confirm-box>
