<header>
  <div class="left">
    <button type="button" routerLink="/tabs/settings">
      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
      <span>{{ "back" | i18n }}</span>
    </button>
  </div>
  <h1 class="center">
    <span class="title">{{ "sync" | i18n }}</span>
  </h1>
  <div class="right"></div>
</header>
<main tabindex="-1">
  <div class="content center-content">
    <button
      type="button"
      class="btn block primary"
      aria-describedby="lastSyncHint"
      (click)="sync()"
      #syncBtn
      [disabled]="$any(syncBtn).loading"
      [appApiAction]="syncPromise"
    >
      <span [hidden]="$any(syncBtn).loading">{{ "syncVaultNow" | i18n }}</span>
      <i
        class="bwi bwi-spinner bwi-lg bwi-spin"
        [hidden]="!$any(syncBtn).loading"
        aria-hidden="true"
      ></i>
    </button>
    <p id="lastSyncHint" class="text-center text-muted small">
      {{ "lastSync" | i18n }} {{ lastSync }}
    </p>
  </div>
</main>
