@if (node && index !== undefined) {
  <div
    [class]="node.getClass()"
    [class.tree-node]="true"
    [class.tree-node-active]="node.isActive"
    [class.tree-node-collapsed]="node.isCollapsed && node.hasChildren"
    [class.tree-node-expanded]="node.isExpanded && node.hasChildren"
    [class.tree-node-focused]="node.isFocused"
    [class.tree-node-leaf]="node.isLeaf"
  >
    @if (index === 0) {
      <tree-node-drop-slot [dropIndex]="node.index" [node]="node.parent" />
    }

    <!-- #region <tree-node-wrapper> custom template --->
    <div
      #nodeContentWrapper
      class="node-wrapper"
      role="treeitem"
      [allowDragoverStyling]="node.allowDragoverStyling()"
      [attr.aria-current]="node.isActive"
      [attr.aria-expanded]="node.children?.length ? node.isExpanded : null"
      [attr.aria-selected]="ariaSelected()"
      [attr.data-node-id]="node.id"
      [attr.tabindex]="tabIndex"
      [class.sky-angular-tree-node-active]="showActiveClass()"
      [class.sky-angular-tree-node-selected]="showSelectedClass()"
      [style.padding-left]="node.getNodePadding()"
      [treeAllowDrop]="node.allowDrop"
      [treeDrag]="node"
      [treeDragEnabled]="node.allowDrag()"
      (contextmenu)="node.mouseAction('contextMenu', $event)"
      (dblclick)="node.mouseAction('dblClick', $event)"
      (focus)="onFocus()"
      (mousedown)="onMouseDown()"
      (mouseup)="onMouseUp()"
      (keydown)="onKeyDown($event)"
      (treeDrop)="node.onDrop($event)"
      (treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
      (treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
      (treeDropDragOver)="node.mouseAction('dragOver', $event)"
    >
      <!-- #region <tree-node-expander> custom template --->
      <div class="sky-toggle-children-wrapper">
        @if (node.hasChildren) {
          <button
            class="sky-btn sky-btn-link sky-toggle-children"
            tabindex="-1"
            type="button"
            [attr.aria-label]="nodeName"
            [class.toggle-children-wrapper-expanded]="node.isExpanded"
            [class.toggle-children-wrapper-collapsed]="node.isCollapsed"
            (click)="node.mouseAction('expanderClick', $event)"
          >
            <sky-icon
              size="sm"
              [icon]="node.isExpanded ? 'chevron-down' : 'chevron-right'"
            />
          </button>
        }
        @if (showTogglePlaceholder()) {
          <span class="toggle-children-placeholder"> </span>
        }
      </div>
      <!-- #endregion <tree-node-expander> --->

      <!-- Note: we've made changes to the click event, tabindex, and classes when compared to the original template. -->
      <!-- https://github.com/500tech/angular-tree-component/blob/master/lib/components/tree-node-wrapper.component.ts -->
      <div class="node-content-wrapper">
        @if (showCheckbox()) {
          <sky-checkbox
            [checked]="isSelected"
            [id]="node.data.id"
            [label]="nodeName"
            [indeterminate]="isPartiallySelected"
            (change)="node.mouseAction('checkboxClick', $event)"
          />
        }

        <sky-angular-tree-context-menu>
          <ng-content select="sky-dropdown" />
        </sky-angular-tree-context-menu>

        <tree-node-content
          [index]="index"
          [node]="node"
          [template]="templates?.treeNodeTemplate"
          (click)="node.mouseAction('click', $event)"
        /><span class="sky-control-help-container">
          @if (helpKey || helpPopoverContent) {
            <sky-help-inline
              [helpKey]="helpKey"
              [labelText]="nodeName"
              [popoverContent]="helpPopoverContent"
              [popoverTitle]="helpPopoverTitle"
            />
          } @else {
            <ng-content select=".sky-control-help" />
          }
        </span>
      </div>
    </div>

    <ng-container
      [ngTemplateOutlet]="templates?.treeNodeWrapperTemplate"
      [ngTemplateOutletContext]="{
        $implicit: node,
        node: node,
        index: index,
        templates: templates
      }"
    />
    <!-- #endregion <tree-node-wrapper> -->

    <tree-node-children role="group" [node]="node" [templates]="templates" />

    <tree-node-drop-slot [dropIndex]="node.index + 1" [node]="node.parent" />
  </div>
}