@let open = sideNavService.open();
@let version = sideNavService.version();
@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]";

<!-- Declared before `startSlot` so an icon tile is matched as a tile, never as generic start content. -->
<ng-template #iconTileSlot><ng-content select="bit-icon-tile"></ng-content></ng-template>
<ng-template #startSlot><ng-content select="[slot=start]"></ng-content></ng-template>
<ng-template #endSlot><ng-content select="[slot=end]"></ng-content></ng-template>

@if (version === "default") {
  <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-brand: var(--color-nav-bg-primary-strong); --color-nav-bg-brand-hover: var(--color-nav-bg-primary-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-container *ngTemplateOutlet="startSlot"></ng-container>
            </div>
          }
          @if (route()) {
            <!-- The `data-fvw` attribute passes focus to `this.focusVisibleWithin` -->
            <a
              [class]="interactiveElClass"
              data-fvw
              [routerLink]="route()"
              [relativeTo]="relativeTo()"
              [queryParamsHandling]="queryParamsHandling()"
              [attr.aria-label]="ariaLabel() || text()"
              [attr.aria-expanded]="ariaExpanded()"
              [attr.aria-controls]="ariaControls()"
              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
              [attr.aria-expanded]="ariaExpanded()"
              [attr.aria-controls]="ariaControls()"
              [attr.aria-current]="ariaCurrentValue()"
              (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-container *ngTemplateOutlet="endSlot"></ng-container>
            </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>
} @else {
  <div class="tw-cursor-pointer">
    @if (open || icon() || hasStartIconTile()) {
      <div
        class="tw-relative tw-rounded-xl tw-bg-bg-nav hover:tw-bg-bg-nav-hover"
        [class]="fvwStyles()"
        [style]="showActiveStyles() ? '--color-nav-bg-brand: var(--color-nav-bg-brand-soft);' : ''"
        data-testid="nav-item-container"
        data-spotlight-target
      >
        <div class="tw-relative tw-flex tw-items-center tw-h-full">
          <!-- Non-tile leading content (e.g. a collapse toggle); a tile renders inside the interactive element instead. -->
          @if (open) {
            <div class="tw-ps-2 empty:tw-hidden">
              <ng-container *ngTemplateOutlet="startSlot"></ng-container>
            </div>
          }
          @if (route()) {
            <!-- The `data-fvw` attribute passes focus to `this.focusVisibleWithin` -->
            <a
              [class]="interactiveElClass"
              data-fvw
              [routerLink]="route()"
              [relativeTo]="relativeTo()"
              [queryParamsHandling]="queryParamsHandling()"
              [attr.aria-label]="ariaLabel() || text()"
              [attr.aria-expanded]="ariaExpanded()"
              [attr.aria-controls]="ariaControls()"
              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
              [attr.aria-expanded]="ariaExpanded()"
              [attr.aria-controls]="ariaControls()"
              [attr.aria-current]="ariaCurrentValue()"
              [attr.aria-label]="ariaLabel() || text()"
              (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-pe-2 tw-gap-1 empty:tw-hidden"
              (click)="onEndSlotClick($event)"
            >
              <ng-container *ngTemplateOutlet="endSlot"></ng-container>
            </div>
          }
        </div>
      </div>
    }
  </div>

  <!-- Main content of `NavItem` -->
  <ng-template #anchorAndButtonContent>
    <div
      [title]="text()"
      class="tw-p-2 tw-flex tw-items-center tw-h-full"
      [class.tw-gap-1]="hasStartIconTile()"
      [class.tw-text-center]="!open"
      [class.tw-justify-center]="!open"
      [class.tw-font-normal]="!showActiveStyles()"
      [class.tw-font-semibold]="showActiveStyles()"
    >
      <!-- Leading icon tile: inside the interactive element and, when collapsed, the sole rail glyph -->
      <ng-container *ngTemplateOutlet="iconTileSlot"></ng-container>
      @if ((icon() || treeDepth() > 1) && !hasStartIconTile()) {
        <div class="tw-size-6 tw-flex tw-items-center tw-justify-center">
          @if (icon()) {
            <bit-icon
              class="!tw-m-0 tw-text-lg tw-shrink-0"
              [name]="icon()"
              [attr.aria-hidden]="open"
              [attr.aria-label]="text()"
            ></bit-icon>
          }
        </div>
      }
      @if (open) {
        <span
          [class.tw-ps-1]="treeDepth() <= 1"
          [class.-tw-ms-px]="!icon() && treeDepth() > 1"
          class="tw-truncate"
          >{{ text() }}</span
        >
      }
    </div>
  </ng-template>
}