<ng-template #navigationList let-navigationItems>
  <ul
    class="docs-navigation-list docs-faceted-list"
    [class.docs-navigation-list-dropdown]="isDropdownView"
  >
    @for (item of navigationItems; track $index) {
    <li
      class="docs-faceted-list-item"
      [class.docs-navigation-link-hidden]="displayItemsToLevel && item.level > displayItemsToLevel"
    >
      @if (item.path) { @if (item.isExternal) {
      <a [href]="item.path" target="_blank">
        <span [class.docs-external-link]="item.isExternal">{{ item.label }}</span>
        @if (item.children && item.level! > 1 && !item.isExpanded) {
        <docs-icon>chevron_right</docs-icon>
        }
      </a>
      } @else {
      <a
        [routerLink]="'/' + item.path"
        [routerLinkActiveOptions]="{
          queryParams: 'ignored',
          fragment: 'ignored',
          matrixParams: 'exact',
          paths: 'exact',
          exact: false
        }"
        routerLinkActive="docs-faceted-list-item-active"
        (click)="emitClickOnLink()"
      >
        <span>{{ item.label }}</span>
        @if (item.children && !item.isExpanded) {
        <docs-icon>chevron_right</docs-icon>
        }
      </a>
      } } @else {
      <!-- Nav Section Header -->
      @if (item.level !== collapsableLevel && item.level !== expandableLevel) {
      <div class="docs-secondary-nav-header">
        <span>{{ item.label }}</span>
      </div>
      }

      <!-- Nav Button Expand/Collapse -->
      @if ((item.children && item.level === expandableLevel) || item.level === collapsableLevel) {
      <button
        type="button"
        (click)="toggle(item)"
        attr.aria-label="{{ item.isExpanded ? 'Collapse' : 'Expand' }} {{ item.label }}"
        [attr.aria-expanded]="item.isExpanded"
        class="docs-secondary-nav-button"
        [class.docs-faceted-list-item-active]="item | isActiveNavigationItem: activeItem()"
        [class.docs-expanded-button]="item.children && item.level == collapsableLevel"
        [class.docs-not-expanded-button]="item.children && item.level === expandableLevel"
        [class.docs-nav-item-has-icon]="
          item.children && item.level === expandableLevel && !item.isExpanded
        "
      >
        @if (item.children && item.level === collapsableLevel) {
        <docs-icon>arrow_back</docs-icon>
        }
        <span>{{ item.label }}</span>
      </button>
      } } @if (item.children?.length > 0) {
      <ng-container
        *ngTemplateOutlet="navigationList; context: {$implicit: item.children}"
      ></ng-container>
      }
    </li>
    }
  </ul>
</ng-template>

<ng-container
  *ngTemplateOutlet="navigationList; context: {$implicit: navigationItems}"
></ng-container>
