@let accessibleProducts = accessibleProducts$ | async;
@if (accessibleProducts && accessibleProducts.length > 1) {
  <!-- [attr.icon] is used to keep the icon attribute on the bit-nav-item after prod mode is enabled. Matches other navigation items and assists in automated testing. -->
  <bit-nav-item
    *ngFor="let product of accessibleProducts"
    [icon]="product.icon"
    [text]="product.name"
    [route]="product.appRoute"
    [attr.icon]="product.icon"
    [forceActiveStyles]="product.isActive"
    focusAfterNavTarget="body"
  >
  </bit-nav-item>
}

@if (shouldShowPremiumUpgradeButton$ | async) {
  <app-upgrade-nav-button></app-upgrade-nav-button>
}

@let moreProducts = moreProducts$ | async;
@if (moreProducts && moreProducts.length > 0) {
  <section class="tw-mt-2 tw-flex tw-w-full tw-flex-col tw-gap-2 tw-border-0">
    <span class="tw-text-xs !tw-text-fg-nav tw-p-2 tw-pb-0">{{ "moreFromBitwarden" | i18n }}</span>
    <ng-container *ngFor="let more of moreProducts">
      <div class="tw-ps-2 tw-pe-2">
        <!-- <a> for when the marketing route is external -->
        <a
          *ngIf="more.marketingRoute.external"
          [href]="more.marketingRoute.route"
          target="_blank"
          rel="noreferrer"
          class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-medium !tw-text-fg-nav !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
        >
          <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
          <div>
            {{ more.otherProductOverrides?.name ?? more.name }}
            <div
              *ngIf="more.otherProductOverrides?.supportingText"
              class="tw-text-xs tw-font-normal"
            >
              {{ more.otherProductOverrides.supportingText }}
            </div>
          </div>
        </a>
        <!-- <a> for when the marketing route is internal, it needs to use [routerLink] instead of [href] like the external <a> uses. -->
        <a
          *ngIf="!more.marketingRoute.external"
          [routerLink]="more.marketingRoute.route"
          rel="noreferrer"
          class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-medium !tw-text-fg-nav !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
        >
          <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
          <div>
            {{ more.otherProductOverrides?.name ?? more.name }}
            <div
              *ngIf="more.otherProductOverrides?.supportingText"
              class="tw-text-xs tw-font-normal"
            >
              {{ more.otherProductOverrides.supportingText }}
            </div>
          </div>
        </a>
      </div>
    </ng-container>
  </section>
}