<popup-page>
  @if (!(hasPremium$ | async)) {
    <bit-callout [icon]="null">
      {{ "unlockFeaturesWithPremium" | i18n }}
      <button
        bitLink
        buttonType="primary"
        class="tw-text-xs"
        type="button"
        (click)="openUpgradeDialog()"
        [title]="'upgradeNow' | i18n"
      >
        {{ "upgradeNow" | i18n }}
      </button>
    </bit-callout>
  }
  <popup-header slot="header" pageTitle="{{ 'settings' | i18n }}">
    <ng-container slot="end">
      <app-pop-out></app-pop-out>
      <app-current-account></app-current-account>
    </ng-container>
  </popup-header>

  <bit-item-group>
    <bit-item>
      <a bit-item-content routerLink="/account-security" [truncate]="false">
        <i slot="start" class="bwi bwi-lock" aria-hidden="true"></i>
        {{ "accountSecurity" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/autofill" [truncate]="false">
        <i slot="start" class="bwi bwi-check-circle" aria-hidden="true"></i>
        <div class="tw-flex tw-items-center tw-justify-center">
          <p class="tw-pr-2">{{ "autofillNoun" | i18n }}</p>
          @if (showAutofillBadge$ | async) {
            <bit-berry
              variant="danger"
              [value]="1"
              [attr.aria-label]="'nudgeBadgeAria' | i18n"
            ></bit-berry>
          }
        </div>
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/notifications" [truncate]="false">
        <i slot="start" class="bwi bwi-file-text" aria-hidden="true"></i>
        {{ "notifications" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a
        bit-item-content
        routerLink="/vault-settings"
        (click)="dismissBadge(NudgeType.EmptyVaultNudge)"
        [truncate]="false"
      >
        <i slot="start" class="bwi bwi-vault" aria-hidden="true"></i>
        <div class="tw-flex tw-items-center tw-justify-center">
          <p class="tw-pr-2">{{ "settingsVaultOptions" | i18n }}</p>
          <!--
            Currently can be only 1 item for notification.
            Will make this dynamic when more nudges are added
          -->
          @if (showVaultBadge$ | async) {
            <bit-berry
              variant="danger"
              [value]="1"
              [attr.aria-label]="'nudgeBadgeAria' | i18n"
            ></bit-berry>
          }
        </div>

        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/appearance" [truncate]="false">
        <i slot="start" class="bwi bwi-brush" aria-hidden="true"></i>
        {{ "appearance" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>

    @if (showAdminSettingsLink$ | async) {
      <bit-item>
        <a bit-item-content routerLink="/admin" [truncate]="false">
          <i slot="start" class="bwi bwi-business" aria-hidden="true"></i>
          <div class="tw-flex tw-items-center tw-justify-center">
            <p class="tw-pr-2">{{ "admin" | i18n }}</p>
            @if (showAdminBadge$ | async) {
              <bit-berry
                variant="danger"
                [value]="1"
                [attr.aria-label]="'nudgeBadgeAria' | i18n"
              ></bit-berry>
            }
          </div>
          <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
        </a>
      </bit-item>
    }

    <bit-item>
      <a bit-item-content routerLink="/about" [truncate]="false">
        <i slot="start" class="bwi bwi-info-circle" aria-hidden="true"></i>
        {{ "about" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/download-bitwarden" [truncate]="false">
        <i slot="start" class="bwi bwi-mobile" aria-hidden="true"></i>
        <div class="tw-flex tw-items-center">
          <p class="tw-pr-2">{{ "downloadBitwardenApps" | i18n }}</p>
          @if (showDownloadBitwardenNudge$ | async) {
            <bit-berry
              variant="danger"
              [value]="1"
              [attr.aria-label]="'nudgeBadgeAria' | i18n"
            ></bit-berry>
          }
        </div>
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/more-from-bitwarden" [truncate]="false">
        <i slot="start" class="bwi bwi-grid" aria-hidden="true"></i>
        {{ "moreFromBitwarden" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
  </bit-item-group>
</popup-page>
