<div class="expanded-tree-node" *ngIf="treeNodeModel">
  <digi-ng-typography-dynamic-heading
    class="expanded-tree-node__heading"
    [afText]="getTreeNodeHeadingText(treeNodeModel)"
    [afLevel]="headingLevel"
  ></digi-ng-typography-dynamic-heading>
  <p class="expanded-tree-node__info" *ngIf="treeNodeModel.showGeneralInfoAboutGrandChildren">
    {{treeNodeModel.grandChildrenInfo}}
  </p>
  <div
    *ngIf="treeNodeModel.children && !treeNodeModel.showGeneralInfoAboutGrandChildren"
    class="expanded-tree-node__filter"
  >
    <digi-form-input-search
      [attr.af-variation]="FormInputSearchVariation.S"
      [attr.af-button-text]="getFilterButtonAriaLabelText(treeNodeModel)"
      [attr.af-button-type]="ButtonType.BUTTON"
      [attr.af-label]="' '"
      [attr.af-aria-labelledby]="getFilterDescriptionId(treeNodeModel)"
      (afOnFocusOutside)="onFocusOutsideFilter($event)"
      (afOnChange)="onFilterTextChanged($event, treeNodeModel)"
      (afOnKeyup)="onFilterTextChanged($event, treeNodeModel)"
    ></digi-form-input-search>
    <div class="msfa__a11y-sr-only" [attr.id]="getFilterDescriptionId(treeNodeModel)">
      Filtrera valbara alternativ där deras namn måste innehålla den angivna texten.
    </div>
  </div>
  <div
    *ngIf="hasChildLeafNodes(treeNodeModel)"
    class="expanded-tree-node__node-checkbox-presentation expanded-tree-node__node-checkbox-presentation--toggle-all"
    [ngClass]="{
                'expanded-tree-node__node-checkbox-presentation--focus': treeNodeModel.toggleAllHasFocus,
                'expanded-tree-node__node-checkbox-presentation--checked': allChildLeafNodesAreSelected(treeNodeModel)
              }"
    [attr.id]="getPresentationToggleAllId(treeNodeModel)"
    (click)="nodePresentationToggleAllClicked(treeNodeModel)"
  >
    <span class="expanded-tree-node__node-checkbox-presentation__box"></span>
    <span class="expanded-tree-node__node-checkbox-presentation__text">{{treeNodeModel.toggleAllChildrenLabel}}</span>
  </div>
  <ng-container *ngIf="visibleChildren">
    <ul *ngIf="!treeNodeModel.showGeneralInfoAboutGrandChildren" class="expanded-tree-node__nodes">
      <li
        *ngFor="let childNode of visibleChildren"
        [attr.id]="getPresentationItemId(childNode)"
        [ngClass]="{'expanded-tree-node__node--leaf' : isLeafNode(childNode)}"
        class="expanded-tree-node__node"
      >
        <ng-container
          [ngTemplateOutlet]="childNode.children ? nodeExpansionPresentationTemplate : nodeCheckboxPresentationTemplate"
          [ngTemplateOutletContext]="{node: childNode, parentNode: treeNodeModel}"
        ></ng-container>
      </li>
    </ul>
  </ng-container>

  <ng-template #nodeCheckboxPresentationTemplate let-node="node">
    <div
      class="expanded-tree-node__node-checkbox-presentation"
      [ngClass]="{
            'expanded-tree-node__node-checkbox-presentation--focus': node.hasFocus,
            'expanded-tree-node__node-checkbox-presentation--checked': node.isSelected
          }"
      (click)="nodePresentationItemClicked(node)"
    >
      <span class="expanded-tree-node__node-checkbox-presentation__box"></span>
      <span class="expanded-tree-node__node-checkbox-presentation__text">{{node.label}}</span>
    </div>
  </ng-template>
  <ng-template #nodeExpansionPresentationTemplate let-node="node" let-parentNode="parentNode">
    <div
      class="expanded-tree-node__node-expansion-presentation"
      [ngClass]="{
            'expanded-tree-node__node-expansion-presentation--focus': node.hasFocus,
            'expanded-tree-node__node-expansion-presentation--active' : isExpandedNode(parentNode, node)
          }"
      (click)="nodePresentationItemClicked(node)"
    >
      <span class="expanded-tree-node__node-expansion-presentation__text">{{node.label}}</span>
      <span
        class="expanded-tree-node__node-expansion-presentation__has-selection-dot"
        *ngIf="hasSelectedDescendant(node)"
        aria-hidden="true"
      ></span>
      <digi-icon-arrow-right class="expanded-tree-node__node-expansion-presentation__icon"></digi-icon-arrow-right>
    </div>
  </ng-template>
</div>
