<!--
  ~ Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<mat-list-item
  [id]="navItem?.id"
  [attr.data-test]="'sidebar-nav-item-' + navItem?.id"
  tabindex="0"
  [style.position]="'relative'"
  [class.active]="active()"
  [matTooltipClass]="'sidebar-nav-tooltip'"
  [class.active-expandable]="activeAndExpandable()"
  [matTooltip]="tooltip"
  [matTooltipShowDelay]="0"
  [matTooltipHideDelay]="0"
  [class.heading]="heading"
  [class.second-level]="navItem.expanded && secondLevel"
  (click)="onFirstLevelClick()"
  cdk-overlay-origin
  #popoverOrigin="cdkOverlayOrigin"
>
  <mat-icon
    matListIcon
    class="nav-link-icon"
    [fontSet]="navItem?.iconFont || 'bosch'"
    [fontIcon]="navItem?.icon"
    [svgIcon]="navItem?.svgIcon"
    *ngIf="showIcon"
    [matBadge]="navItem.iconBadgeText | async"
    [matBadgeColor]="navItem.iconBadgeColor | async"
    >{{ navItem?.iconContext }}</mat-icon
  >
  <mat-icon *ngIf="heading" matListIcon fontSet="bosch" fontIcon="Bosch-Ic-arrow-expand-left"></mat-icon>
  <p matLine>{{ navItem?.title }}</p>
  <mat-icon
    *ngIf="expandable && hasLevel2Items()"
    fontSet="bosch"
    fontIcon="Bosch-Ic-arrow-expand-right"
    class="expand-icon"
    [@indicatorRotate]="expandedState()"
  ></mat-icon>
  <mat-icon *ngIf="arrowRight" fontSet="bosch" fontIcon="Bosch-Ic-arrow-expand-right" class="expand-icon"></mat-icon>
</mat-list-item>
<ng-container *ngIf="expandable && hasLevel2Items()">
  <div
    [@bodyExpansion]="expandedState()"
    class="sub-nav-links-container"
    [class.sub-nav-links-expanded]="isSidebarOpen"
  >
    <ng-container *ngFor="let item of navItem?.items">
      <mat-list-item
        tabindex="0"
        class="sub-nav-link"
        [id]="item?.id"
        [attr.data-test]="'sidebar-nav-item-' + item?.id"
        [class.active]="item.active"
        [class.second-level]="secondLevel"
        (click)="onSecondLevelClick(item)"
      >
        <p matLine>{{ item?.title }}</p>
      </mat-list-item>
    </ng-container>
  </div>
</ng-container>
