@if (node.component) {
  <ng-container
    *c8yComponentOutlet="node.component; environmentInjector: node.injector"
  ></ng-container>
}

@if (!node.component) {
  <div
    class="slot"
    [hidden]="node.hidden"
    (dragstart)="node.dragStart($event)"
    (dragend)="node.dragEnd($event)"
    (drop)="node.drop($event)"
    [draggable]="node.draggable"
    [ngClass]="{ dragged: node.dragged, disabled: node.loading }"
  >
    <ng-container>
      <div
        class="link"
        tabindex="-1"
        [routerLink]="node.canNavigate ? node.path : undefined"
        [ngClass]="{
          active: isActive$ | async,
          'dragged-hover': node.draggedHover && !node.dragged
        }"
        (dragover)="node.canDrop && $event.preventDefault()"
        (dragenter)="node.canDrop && node.dragEnter($event)"
        (dragleave)="node.canDrop && node.dragLeave($event)"
      >
        <ng-container *ngTemplateOutlet="navicon"></ng-container>
        <button
          class="btn-clean"
          title="{{ node.translateLabel ? (node.label | translate) : node.label }}"
          [attr.aria-expanded]="node.hasChildren ? node.open : null"
          type="button"
          draggable="false"
          [attr.data-cy]="node.label"
          [attr.id]="isRoot ? node.id : undefined"
          (click)="click(node.canNavigate ? 'link' : 'expander', $event)"
          [ngClass]="{
            'root-link': isRoot,
            open: node.open && node.hasChildren,
            parent: node.hasChildren
          }"
        >
          <ng-container *ngTemplateOutlet="inner"></ng-container>
        </button>
      </div>
    </ng-container>
    @if (node.children.length) {
      <div
        class="children panel-expand expand"
        [collapse]="!node.open"
        [isAnimated]="true"
      >
        @for (childNode of node.children; track childNode) {
          <c8y-navigator-node
            [node]="childNode"
            (nodeClick)="nodeClick.emit($event)"
          ></c8y-navigator-node>
        }
      </div>
    }
  </div>
}

<!-- icon -->
<ng-template #navicon>
  <!-- loader -->
  @if (node.loading && !isRoot) {
    <i
      class="icon-spin loadingIndicator"
      [c8yIcon]="'circle-o-notch'"
      [ngClass]="{ 'm-l-16': isRoot, 'm-l-8': !isRoot }"
    ></i>
  }
  <ng-container #icon></ng-container>
</ng-template>

<ng-template #inner>
  <!--title  -->
  <span>{{ node.translateLabel ? (node.label | translate) : node.label }}</span>

  <!--expander  -->
  @if (node.hasChildren) {
    <i
      class="expander"
      [c8yIcon]="'chevron-down'"
      [attr.aria-label]="expandTitle"
      role="button"
      (click)="click('expander', $event)"
      data-cy="c8y-navigator-node--expander"
    ></i>
  }

  <!--  Popover confirm  -->
  <c8y-popover-confirm
    triggers="focus"
    containerClass="navigator-popover"
  ></c8y-popover-confirm>
</ng-template>