<header>
  <div class="left">
    <button type="button" routerLink="/tabs/settings">
      <span class="header-icon" aria-hidden="true"><i class="bwi bwi-angle-left"></i></span>
      <span>{{ "back" | i18n }}</span>
    </button>
  </div>
  <h1 class="center">
    <span class="title">{{ "importData" | i18n }}</span>
  </h1>
  <div class="right">
    <button form="import_form_importForm" type="submit" [disabled]="disabled">
      <span [hidden]="loading">{{ "importData" | i18n }}</span>
      <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!loading" aria-hidden="true"></i>
    </button>
  </div>
</header>
<main tabindex="-1">
  <div class="tw-p-4">
    <tools-import
      (formDisabled)="this.disabled = $event"
      (formLoading)="this.loading = $event"
      (onSuccessfulImport)="this.onSuccessfulImport($event)"
    ></tools-import>
  </div>
</main>
