<bit-dialog #dialog dialogSize="large" background="alt">
  <span bitDialogTitle>{{ "importNoun" | i18n }}</span>
  <ng-container bitDialogContent>
    <div class="tw-relative">
      <tools-import
        (formLoading)="this.loading = $event"
        (formDisabled)="this.disabled = $event"
        (onSuccessfulImport)="this.onSuccessfulImport($event)"
        [onImportFromBrowser]="this.onImportFromBrowser"
        [onLoadProfilesFromBrowser]="this.onLoadProfilesFromBrowser"
        [class.tw-invisible]="loading"
      ></tools-import>
      @if (loading) {
        <div class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center">
          <i class="bwi bwi-spinner bwi-spin bwi-3x tw-text-primary-600" aria-hidden="true"></i>
        </div>
      }
    </div>
  </ng-container>
  <ng-container bitDialogFooter>
    <button
      [disabled]="disabled"
      [loading]="loading"
      form="import_form_importForm"
      bitButton
      type="submit"
      bitFormButton
      buttonType="primary"
    >
      {{ "importVerb" | i18n }}
    </button>
    <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
      {{ "cancel" | i18n }}
    </button>
  </ng-container>
</bit-dialog>
