<ng-container *ngIf="!(newVariant$ | ngrxPush); else variantCreated">
  <form
    nz-form
    [nzLayout]="layout"
    [formGroup]="form">
    <formly-form
      [form]="form"
      [fields]="config"
      [model]="model"
      [options]="options"
      (modelChange)="modelChange($event)">
    </formly-form>
  </form>
</ng-container>
<ng-template #variantCreated>
  <ng-container *ngIf="newVariant$ | ngrxPush as variant">
    <nz-alert
      *ngIf="newlyCreated"
      nzType="success"
      nzShowIcon
      [nzMessage]="successMessage"
      [nzDescription]="variantLink"></nz-alert>
    <ng-template #successMessage>
      New Variant {{ variant.name }} added.
    </ng-template>
    <ng-template #variantLink>
      View its
      <a [routerLink]="['/variants', variant.id, 'summary']">details here</a>.
    </ng-template>
    <nz-alert
      *ngIf="!newlyCreated"
      nzType="info"
      nzShowIcon
      [nzMessage]="existsMessage"
      [nzDescription]="variantLink"></nz-alert>
    <ng-template #existsMessage>
      Variant {{ variant.name }} already exists.
    </ng-template>
  </ng-container>
</ng-template>
