<nb-card [nbSpinner]="loading || uploading">
  <nb-card-header>Upload Stories</nb-card-header>
  <nb-card-body>
    <form
      [formGroup]="form"
      (submit)="import()"
    >
      <tock-form-control
        label="Stories dump file"
        name="importFile"
        [required]="true"
        [controls]="file"
        [showError]="isImportSubmitted"
      >
        <div
          *ngIf="fileFormatErrorMessage"
          class="font-weight-bold text-danger font-italic mb-2"
        >
          {{ fileFormatErrorMessage }}
        </div>
        <tock-file-upload
          id="importFile"
          formControlName="file"
          [autofocus]="true"
          [fullWidth]="true"
          [multiple]="false"
          [fileTypeAccepted]="['json']"
        ></tock-file-upload>
      </tock-form-control>
    </form>
  </nb-card-body>

  <nb-card-footer class="card-footer-actions">
    <button
      nbButton
      ghost
      (click)="cancel()"
    >
      Cancel
    </button>
    <button
      nbButton
      outline
      (click)="import()"
      [disabled]="!canSaveImport"
      status="primary"
    >
      Import
    </button>
  </nb-card-footer>
</nb-card>
