<popup-page>
  <popup-header slot="header" [pageTitle]="'settingsVaultOptions' | i18n" showBackButton>
    <ng-container slot="end">
      <app-pop-out></app-pop-out>
    </ng-container>
  </popup-header>

  <bit-item-group>
    <bit-item>
      <a bit-item-content routerLink="/folders">
        {{ "folders" | vfo1I18n: "myFolders" }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <button type="button" bit-item-content (click)="import()" [title]="'popOutNewWindow' | i18n">
        <div class="tw-flex tw-items-center tw-justify-center tw-gap-2">
          <p>{{ "importNoun" | i18n }}</p>
          @if (emptyVaultImportBadge$ | async) {
            <bit-berry variant="danger" [attr.aria-label]="'nudgeBadgeAria' | i18n" [value]="1">
            </bit-berry>
          }
        </div>
        <ng-container slot="end">
          <span class="tw-sr-only">{{ "popOutNewWindow" | i18n }}</span>
          <i class="bwi bwi-popout tw-text-muted" aria-hidden="true"></i>
        </ng-container>
      </button>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/export">
        {{ "exportNoun" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    @if (userCanArchive()) {
      <bit-item>
        <a data-test-id="archive-link" bit-item-content routerLink="/archive">
          {{ "archiveNoun" | i18n }}
          <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
        </a>
      </bit-item>
    } @else {
      <bit-item>
        <a
          data-test-id="premium-archive-link"
          bit-item-content
          href="#"
          (click)="conditionallyRouteToArchive($event)"
        >
          <span class="tw-flex tw-items-center tw-gap-2">
            {{ "archiveNoun" | i18n }}
            <app-premium-badge></app-premium-badge>
          </span>
          <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
        </a>
      </bit-item>
    }
    <bit-item>
      <a bit-item-content routerLink="/trash">
        {{ "trash" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <button type="button" bit-item-content [disabled]="syncLoading" (click)="sync()">
        {{ "syncNow" | i18n }}
        <span slot="secondary">{{ lastSync }}</span>
        <span slot="end">
          @if (syncLoading) {
            <bit-spinner size="sm"></bit-spinner>
          } @else {
            <i class="bwi bwi-refresh" aria-hidden="true"></i>
          }
        </span>
      </button>
    </bit-item>
  </bit-item-group>
</popup-page>
