<div class="tw-mt-auto">
  @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"
    >
    </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-alt2 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-alt2 !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-alt2 !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>
  }
</div>
