@let open = sideNavService.open();
@let interactiveElClass =
  "tw-size-full tw-px-0 tw-block tw-truncate tw-border-none !tw-text-fg-nav tw-text-start hover:tw-no-underline focus:tw-outline-none [&_i]:tw-leading-[1.5rem]";

<div class="tw-cursor-pointer tw-ps-3 tw-pe-3">
  @if (open || icon()) {
    <div
      [style.padding-inline-start]="navItemIndentationPadding()"
      class="tw-relative tw-rounded-xl tw-h-10 tw-bg-bg-nav hover:tw-bg-bg-nav-hover"
      [class]="fvwStyles()"
      [style]="
        showActiveStyles()
          ? '--color-nav-bg-primary: var(--color-nav-bg-primary-strong); --color-nav-bg-secondary: var(--color-nav-bg-secondary-strong); --color-nav-bg-primary-hover: var(--color-nav-bg-primary-hover-strong); --color-nav-bg-secondary-hover: var(--color-nav-bg-secondary-hover-strong);'
          : ''
      "
      data-testid="nav-item-container"
      data-spotlight-target
    >
      <div class="tw-relative tw-flex tw-items-center tw-h-full">
        @if (open) {
          <div class="tw-absolute tw-left-[0px] tw-transform tw--translate-x-[calc(100%_+_4px)]">
            <ng-content select="[slot=start]"></ng-content>
          </div>
        }
        @if (route()) {
          <!-- The `data-fvw` attribute passes focus to `this.focusVisibleWithin` -->
          <a
            [class]="interactiveElClass"
            data-fvw
            [routerLink]="route()"
            [relativeTo]="relativeTo()"
            [attr.aria-label]="ariaLabel() || text()"
            routerLinkActive
            [routerLinkActiveOptions]="routerLinkActiveOptions()"
            [ariaCurrentWhenActive]="ariaCurrentWhenActive()"
            (isActiveChange)="setIsActive($event)"
            (click)="mainContentClicked.emit()"
            [state]="{
              focusAfterNav: focusAfterNavTarget(),
            }"
            data-testid="nav-item-interactive"
          >
            <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
          </a>
        } @else {
          <button
            type="button"
            [class]="interactiveElClass"
            data-fvw
            (click)="mainContentClicked.emit()"
            data-testid="nav-item-interactive"
          >
            <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
          </button>
        }

        @if (open) {
          <div
            class="tw-flex tw-items-center tw-gap-1 tw-pe-3 [&:has(button)]:tw-pe-2 empty:tw-hidden"
            (click)="$event.stopPropagation()"
          >
            <ng-content select="[slot=end]"></ng-content>
          </div>
        }
      </div>
    </div>
  }
</div>

<!-- Main content of `NavItem` -->
<ng-template #anchorAndButtonContent>
  <div
    [title]="text()"
    class="tw-gap-2 tw-py-0 tw-flex tw-items-center tw-h-full"
    [class.tw-text-center]="!open"
    [class.tw-justify-center]="!open"
    [class.tw-font-normal]="!showActiveStyles()"
    [class.tw-font-semibold]="showActiveStyles()"
  >
    @if (icon()) {
      <bit-icon
        class="!tw-m-0 tw-w-4 tw-shrink-0"
        [name]="icon()"
        fixedWidth="true"
        [attr.aria-hidden]="open"
        [attr.aria-label]="text()"
      ></bit-icon>
    }
    @if (open) {
      <span class="tw-truncate">{{ text() }}</span>
    }
  </div>
</ng-template>