@let hydration = node().hydration;

<div class="tree-node-info">
  @if (node().expandable) {
    <!-- We stop propagration on dblClick to prevent to show the element panel -->
    <button
      (click)="treeControl().toggle(node())"
      (dblclick)="$event.stopPropagation()"
      [attr.aria-label]="'Toggle ' + node().name"
    >
      <mat-icon class="mat-icon-rtl-mirror">
        {{ treeControl().isExpanded(node()) ? 'expand_more' : 'chevron_right' }}
      </mat-icon>
    </button>
  }

  <!-- The HTML should match directive-forest-utils/getFullNodeName output. -->
  <div class="node-name" #nodeName>
    <span
      class="element-name"
      [class.non-element]="!node().original.hasNativeElement && !node().static"
      [class.angular-element]="isElement()"
      >{{ node().name }}</span
    >
    @if (node().directives) {
      <span class="dir-names">{{ directivesArrayString() }}</span>
    }
  </div>

  @if (changeDetection()) {
    <span class="trait change-detection">{{ changeDetection() }}</span>
  }

  @let block = node().controlFlowBlock;

  @if (BlockType.isDeferBlock(block)) {
    @let defer = block;

    @if (defer) {
      @if (defer.renderedBlock && defer.renderedBlock !== 'defer') {
        <span class="trait">(@{{ defer.renderedBlock }})</span>
      } @else if (!defer.renderedBlock) {
        <span class="trait">(non-rendered)</span>
      }
    }
  } @else if (BlockType.isForLoopBlock(block)) {
    @let forLoop = block;

    @if (forLoop) {
      <span class="trait">
        ({{ forLoop.items.length }} {{ forLoop.items.length === 1 ? 'item' : 'items' }})
      </span>
    }
  } @else if (!hydration || hydration.status !== 'dehydrated') {
    <!-- Shown/hidden via CSS -->
    <span class="console-reference trait"> == $ng0 </span>
  }

  @if (nodeCdData(); as cd) {
    @let below60fps = cd.lastCdPassDuration > FPS_60;

    <span class="pill cycle-count">x{{ cd.cdCount }}</span>
    <span
      class="pill cycle-duration"
      [class.frame-dropped]="below60fps"
      [matTooltip]="
        'The component update time during the last CD cycle' +
        (below60fps ? '. Exceeded 16.6 ms (60 fps)' : '')
      "
      >{{ cd.lastCdPassDuration | number: '1.0-1' }} ms</span
    >
  }

  @switch (hydration?.status) {
    @case ('hydrated') {
      <mat-icon matTooltip="Hydrated" class="hydration">water_drop</mat-icon>
    }
    @case ('dehydrated') {
      <mat-icon matTooltip="Dehydrated" class="hydration skipped">water_do</mat-icon>
    }

    @case ('skipped') {
      <mat-icon matTooltip="Hydration skipped" class="hydration skipped">
        invert_colors_off
      </mat-icon>
    }
    @case ('mismatched') {
      <mat-icon matTooltip="Hydration mismatch" class="hydration mismatched">
        error_outline
      </mat-icon>
    }
  }
</div>

@if (
  treeControl().isExpanded(node()) &&
  hydration &&
  hydration.status === 'mismatched' &&
  (hydration.expectedNodeDetails || hydration.actualNodeDetails)
) {
  <div class="hydration-error">
    @if (hydration.expectedNodeDetails) {
      <div>Expected DOM:</div>
      <pre>{{ hydration.expectedNodeDetails }}</pre>
    }
    @if (hydration.actualNodeDetails) {
      <div>Actual DOM:</div>
      <pre>{{ hydration.actualNodeDetails }}</pre>
    }
  </div>
}