@if (activeToggleButton) {
  <div class="w-tree-buttontoggle flex justify-content-end flex-wrap card-container green-container">
    @if (collapsedNodes) {
      <div>
        <w-button
          size="small"
          type="secondary"
          icon="pi pi-plus"
          [label]="expandButtonLabel"
          (onClick)="expandAll()">
        </w-button>
      </div>
    } @else {
      <w-button
        size="small"
        type="secondary"
        icon="pi pi-minus"
        [label]="collapseButtonLabel"
        (onClick)="collapseAll()">
      </w-button>
    }
  </div>
}

<p-tree class="w-full w-tree" #wTree
  [value]="nodes"
  [(selection)]="selection"
  (selectionChange)="onSelectionChange($event)"
  [selectionMode]="selectionMode"
  [loading]="loading"
  [filter]="activeFilter"
  [filterPlaceholder]="filterPlaceholder"
  [propagateSelectionDown]="propagateSelectionDown"
  [propagateSelectionUp]="propagateSelectionUp"
  [emptyMessage]="emptyMessage"
  [draggableNodes]="draggableNodes"
  [draggableScope]="draggableScope"
  [droppableNodes]="droppableNodes"
  [droppableScope]="droppableScope"
  (onNodeDrop)="onNodeDrope($event)"
  [virtualScroll]="activeVirtualScroll"
  [virtualScrollItemSize]="virtualScrollItemSize"
  [scrollHeight]="scrollHeight"
  (onFilter)="onFilter($event)"
  styleClass="w-tree">
  <ng-template let-node [pTemplate]="nodeItemTemplateName">
    <div class="flex p-elemnt">
      @if (node.icon && isPrimeIcon(node.icon)) {
        <span class="w-tree-icon flex align-items-center justify-content-center" [class]="getIcon(node.icon)"></span>
      }
      @if (node.icon && isPrimeIcon(node.icon) == false) {
        <w-icons class="w-tree-icon flex align-items-center" [name]="node.icon" [height]="16" [width]="18" [color]="'#2e3134'"></w-icons>
      }
      <div class="flex align-items-center">{{node.label}}</div>
    </div>
  </ng-template>
</p-tree>