<ng-container>
  @if (root) {
    @if (item.hasDropDown) {
      <div class="layout-menuitem-root-text root-item-with-dropdown">
        <div class="root-item-label-container">
          <div>{{ item.label }}</div>
          @if (item.hasCreate) {
            <i
              class="pi pi-plus plus-icon"
              (click)="openDialog(item)"
            ></i>
          }
        </div>
        <i
          (click)="toggleExpand(key)"
          [ngClass]="{
          'pi': true,
          'pi-angle-up': isExpanded(key),
          'pi-angle-down': !isExpanded(key)
        }"
          class="expand-icon"
        ></i>
      </div>
    } @else {
      <div class="layout-menuitem-root-text root-item">
        <div>{{ item.label }}</div>
      </div>
    }
  }

  <div>
    <div
      class="menu-item-container"
      [class.active-route-container]="isRouteActive"
      (click)="triggerLink()"
    >
      @if ((item.routerLink && !item.items)) {
        <a
          #link
          (click)="itemClick($event)"
          [ngClass]="item.class"
          class="menu-item-link"
          [class.active-route]="isRouteActive"
          [routerLink]="item.routerLink"
          [fragment]="item.fragment"
          [queryParamsHandling]="item.queryParamsHandling"
          [preserveFragment]="item.preserveFragment"
          [skipLocationChange]="item.skipLocationChange"
          [replaceUrl]="item.replaceUrl"
          [state]="item.state"
          [queryParams]="item.queryParams"
          [attr.target]="item.target"
          tabindex="0"
          pRipple
        >
          @if (item.unhealthy$ | async) {
            <span
              class="library-health-dot"
              [pTooltip]="'common.libraryPathInaccessible' | transloco"
              tooltipPosition="right"
            ></span>
          }
          <app-icon-display
            [icon]="getIconSelection()"
            iconClass="layout-menuitem-icon"
            size="18px"
            [displayEmpty]="true"
          ></app-icon-display>
          <span class="layout-menuitem-text menu-item-text">
        {{ item.label }}
      </span>
        </a>
      }

      <span class="menu-item-end-content">
    @if (item.type === 'Library' || item.type === 'Shelf' || item.type === 'magicShelfItem') {
      @if ((item.type !== 'Library' || (admin || canManipulateLibrary)) && item.label !== 'Unshelved' && item.label !== 'Kobo') {
        <p-button
          (click)="entitymenu.toggle($event); $event.stopPropagation()"
          (mouseover)="hovered = true"
          (mouseleave)="hovered = false"
          [text]="true"
          [outlined]="false"
          [rounded]="true"
          [label]="hovered ? '' : (item.bookCount$ | async)?.toString() || ''"
          [icon]="hovered ? 'pi pi-ellipsis-v' : ''"
          class="entity-menu-button"
        ></p-button>
      }
      <p-menu #entitymenu [model]="item.menu" [popup]="true" appendTo="body"></p-menu>
    }

        @if (item.type === 'Library' && (!admin && !canManipulateLibrary) || item.type === 'All Books' || item.type === 'Series' || item.type === 'Authors' || item.label === 'Unshelved' || item.label === 'Kobo') {
          <p class="book-count">
        {{ formatCount(item.bookCount$ | async) }}
      </p>
        }
  </span>
    </div>

    <div [@children]="isExpanded(key) ? 'expanded' : 'collapsed'" class="submenu-container">
      @if (item.items) {
        <ul>
          @for (child of item.items; track child.routerLink?.[0] ?? child.label; let i = $index) {
            <li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass"></li>
          }
        </ul>
      }
    </div>
  </div>
</ng-container>
