<div>
  <form cForm [formGroup]="form" (ngSubmit)="onSubmit(model)">
    <span class="col col-form-label" i18n *ngIf="formLoading$ || modelLoading$ | async">Loading...</span>
    <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
    <div class="d-grid gap-2 d-md-flex">
      <button class="btn btn-success btn-lg" type="submit"
              [disabled]="!form.valid && (formLoading$ || modelLoading$ | async)">
        {{ submitText }}
      </button>
      <button class="btn btn-primary btn-lg" i18n type="button" *ngIf="!this.isCreateForm()"
              [disabled]="!form.valid && (formLoading$ || modelLoading$ | async)"
              (click)="open(duplicationModal)">Duplicate</button>
      <button class="btn btn-danger btn-lg" i18n type="button" *ngIf="!this.isCreateForm()"
              [disabled]="formLoading$ || modelLoading$ | async"
              (click)="open(confirmDeleteModal)">Delete</button>
      <ng-template #confirmDeleteModal let-modal>
        <div class="modal-header">
            <h4 class="modal-title" i18n>Are you sure you want to delete this {{ this.schema }}?</h4>
            <button type="button" class="btn-close" i18n-aria-label aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')"></button>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-light" i18n i18n-aria-label aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')">Cancel</button>
            <button type="button" class="btn btn-danger" i18n (click)="modal.close('Save click')">Delete</button>
        </div>
      </ng-template>
      <ng-template #duplicationModal let-modal>
        <div class="modal-header">
            <h4 class="modal-title" i18n>Duplicate {{ this.schema }}</h4>
            <button type="button" class="btn-close" i18n-aria-label aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')"></button>
        </div>
        <div class="modal-body">
            <crud-card [resource]="this.resource"
                       [schema]="this.schema"
                       [model]="this.model"
                       [is_modal]="true"
                       (resourceCreated)="onModelDuplicated($event)">
            </crud-card>
        </div>
      </ng-template>
    </div>
  </form>
</div>
