@if (treeControl()) {
  <mat-tree class="property-list" [dataSource]="dataSource()" [treeControl]="treeControl()">
    <mat-tree-node matTreeNodePaddingIndent="14" *matTreeNodeDef="let node" matTreeNodePadding>
      <div class="prop-row non-expandable-row">
        <span class="name">{{ node.prop.name }}</span
        >:
        @if (!node.prop.descriptor.editable) {
          <ng-property-preview class="value" (inspect)="inspect.emit(node)" [node]="node" />
        } @else {
          <ng-property-editor
            class="value"
            [key]="node.prop.name"
            [initialValue]="node.prop.descriptor.value"
            [previewValue]="node.prop.descriptor.preview"
            [containerType]="node.prop.descriptor.containerType"
            (updateValue)="handleUpdate(node, $event)"
          />
        }
        <ng-container [ngTemplateOutlet]="signalBtn" [ngTemplateOutletContext]="{ node }" />
        @if (node.level === 0) {
          <ng-container [ngTemplateOutlet]="logValueBtn" [ngTemplateOutletContext]="{ node }" />
        }
      </div>
    </mat-tree-node>
    <mat-tree-node
      matTreeNodePaddingIndent="14"
      *matTreeNodeDef="let node; when: hasChild"
      matTreeNodePadding
    >
      <button (click)="toggle(node)" class="prop-row expandable-row">
        <mat-icon class="expand-icon">
          {{ treeControl().isExpanded(node) ? 'expand_more' : 'chevron_right' }}
        </mat-icon>
        <span class="name">{{ node.prop.name }}</span
        >:
        <span class="value">{{ node.prop.descriptor.preview }}</span>
        <ng-container [ngTemplateOutlet]="signalBtn" [ngTemplateOutletContext]="{ node }" />
        @if (node.level === 0) {
          <ng-container [ngTemplateOutlet]="logValueBtn" [ngTemplateOutletContext]="{ node }" />
        }
      </button>
    </mat-tree-node>
  </mat-tree>
}

<ng-template #signalBtn let-node="node">
  @if (
    supportedApis().signalPropertiesInspection && signalGraphEnabled() && getSignalNode(node);
    as signalNode
  ) {
    @let tooltip = 'Show \'' + node.prop.name + '\' signal graph';
    <button
      class="prop-action-btn show-signal"
      type="button"
      [matTooltip]="tooltip"
      [aria-label]="tooltip"
      (click)="showGraph($event, signalNode)"
    >
      <mat-icon>graph_2</mat-icon>
    </button>
  }
</ng-template>

<ng-template #logValueBtn let-node="node">
  @let tooltip = 'Log \'' + node.prop.name + '\' to console';
  <button
    class="prop-action-btn log-value"
    type="button"
    [matTooltip]="tooltip"
    [aria-label]="tooltip"
    (click)="handleLogValue($event, node)"
  >
    <mat-icon>terminal</mat-icon>
  </button>
</ng-template>