@let open = sideNavService.open();
@let isOverlay = sideNavService.isOverlay();

<div
  class="tw-relative tw-h-full"
  [attr.role]="isOverlay ? 'dialog' : null"
  [attr.aria-modal]="isOverlay ? 'true' : null"
  [cdkTrapFocus]="isOverlay"
  [attr.aria-label]="isOverlay ? ('sideNavigation' | i18n) : null"
>
  <nav
    id="bit-side-nav"
    class="tw-sticky tw-inset-y-0 tw-left-0 tw-z-30 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-bg-bg-nav tw-text-fg-nav tw-outline-none"
    [style.width.rem]="open ? (sideNavService.width$ | async) : undefined"
    [style]="
      variant() === 'secondary'
        ? '--color-nav-fg-primary: var(--color-nav-fg-secondary); --color-nav-bg-primary: var(--color-nav-bg-secondary); --color-nav-bg-primary-strong: var(--color-nav-bg-secondary-strong); --color-nav-bg-primary-hover: var(--color-nav-bg-secondary-hover); --color-nav-bg-primary-hover-strong: var(--color-nav-bg-secondary-hover-strong); --color-nav-border-primary-focus: var(--color-nav-border-secondary-focus); --color-nav-border-primary: var(--color-nav-border-secondary);'
        : ''
    "
    (keydown)="handleKeyDown($event)"
    [attr.aria-label]="'sideNavigation' | i18n"
  >
    <div
      class="tw-flex-1 tw-min-h-0 tw-overflow-auto tw-overscroll-none"
      style="container-type: size"
      id="bit-side-nav--scroll"
    >
      <div class="tw-flex tw-flex-col tw-min-h-full">
        <div class="tw-flex-1">
          <ng-content></ng-content>
        </div>
        @if (open) {
          <div
            class="tw-w-full tw-bg-bg-nav [@container_(min-height:600px)]:tw-sticky [@container_(min-height:600px)]:tw-bottom-0"
          >
            <ng-content select="[slot=product-switcher]"></ng-content>
          </div>
        }
      </div>
    </div>
    <div class="tw-w-full tw-bg-bg-nav">
      <bit-nav-divider></bit-nav-divider>
      @if (open) {
        <ng-content select="[slot=footer]"></ng-content>
      }
      <div class="tw-m-4">
        <button
          #toggleButton
          type="button"
          class="tw-mx-auto tw-block"
          [bitIconButton]="open ? 'bwi-angle-left' : 'bwi-angle-right'"
          buttonType="side-nav"
          size="small"
          (click)="sideNavService.toggle()"
          [label]="'toggleSideNavigation' | i18n"
          [attr.aria-expanded]="open"
          aria-controls="bit-side-nav"
        ></button>
      </div>
    </div>
  </nav>
  <div
    cdkDrag
    (cdkDragMoved)="onDragMoved($event)"
    class="tw-absolute tw-top-0 -tw-right-0.5 tw-z-30 tw-h-full tw-w-1 tw-cursor-col-resize tw-transition-colors tw-duration-[250ms] hover:tw-ease-in-out hover:tw-delay-[250ms] hover:tw-bg-primary-300 focus:tw-outline-none focus-visible:tw-bg-primary-300 before:tw-content-[''] before:tw-absolute before:tw-block before:tw-inset-y-0 before:-tw-left-0.5 before:-tw-right-1"
    [class.tw-hidden]="!open"
    tabindex="0"
    (keydown)="onKeydown($event)"
    role="separator"
    [attr.aria-valuenow]="sideNavService.width$ | async"
    [attr.aria-valuemax]="sideNavService.MAX_OPEN_WIDTH"
    [attr.aria-valuemin]="sideNavService.MIN_OPEN_WIDTH"
    aria-orientation="vertical"
    aria-controls="bit-side-nav"
    [attr.aria-label]="'resizeSideNavigation' | i18n"
  ></div>
</div>