<header>
  <div class="left">
    <button type="button" routerLink="/vault-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">{{ "exportVault" | i18n }}</span>
  </h1>
  <div class="right">
    <button form="export_form_exportForm" type="submit" [disabled]="disabled">
      <span [hidden]="loading">{{ "submit" | 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-export
      (formDisabled)="this.disabled = $event"
      (formLoading)="this.loading = $event"
      (onSuccessfulExport)="this.onSuccessfulExport($event)"
    ></tools-export>
  </div>
</main>
