<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" | i18n }}
        <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>
          <span
            *ngIf="emptyVaultImportBadge$ | async"
            bitBadge
            variant="notification"
            [attr.aria-label]="'nudgeBadgeAria' | i18n"
          >
            1
          </span>
        </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 (showArchiveItem()) {
      @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 (click)="sync()">
        {{ "syncNow" | i18n }}
        <span slot="secondary">{{ lastSync }}</span>
        <i slot="end" class="bwi bwi-refresh" aria-hidden="true"></i>
      </button>
    </bit-item>
  </bit-item-group>
</popup-page>
