@let node = this.node();

<div class="header">
  <button
    ng-button
    size="compact"
    class="action-btn"
    (click)="gotoSource.emit(node)"
    [disabled]="!node.debuggable"
  >
    <mat-icon> arrow_outward </mat-icon>
    View Source
  </button>
  <button
    ng-button
    btnType="icon"
    class="close-btn"
    (click)="close.emit()"
    title="Close the details"
  >
    <mat-icon>close</mat-icon>
  </button>
</div>

<dl>
  @if (node.label) {
    <dt>Name:</dt>
    <dd class="node-name">{{ node.label }}</dd>
  }
  <dt>Type:</dt>
  <dd>
    <span [class]="TYPE_CLASS_MAP[node.kind]" [class.type]="true">{{ node.kind }}</span>
  </dd>
  <dt>Epoch:</dt>
  <dd>{{ node.epoch }}</dd>
</dl>

@if (node.kind === 'signal' || node.kind === 'computed') {
  @if (node.preview.preview === 'undefined') {
    <div class="value">undefined</div>
  } @else {
    <ng-signals-value-tree [dataSource]="dataSource()" [treeControl]="treeControl()" />
  }
}