@if (!diDebugAPIsAvailable()) {
  <p class="not-supported">
    This feature is only available on version 17.0.0 or higher of Angular.
  </p>
} @else {
  <div class="wrapper">
    <div class="options">
      <div class="option">
        <input
          id="hide-injectors-no-providers"
          type="checkbox"
          (change)="toggleHideInjectorsWithNoProviders()"
        />
        <label for="hide-injectors-no-providers">Hide injectors with no providers</label>
      </div>
      <div class="option">
        <input id="hide-fw-injectors" type="checkbox" (change)="toggleHideAngularInjectors()" />
        <label for="hide-fw-injectors">Hide framework injectors</label>
      </div>
    </div>
    <as-split class="trees" unit="percent" direction="horizontal" [gutterSize]="9">
      <as-split-area size="60">
        <as-split
          [ngResponsiveSplit]="responsiveSplitConfig"
          (directionChange)="onResponsiveSplitDirChange($event)"
          unit="percent"
          [gutterSize]="9"
        >
          <as-split-area [size]="envHierarchySize()">
            <div class="injector-hierarchy">
              <h2>
                <span>Environment Hierarchy</span>
                <ng-docs-ref-button docs="injector-hierarchies" />
              </h2>
              <section class="injector-graph">
                <ng-tree-visualizer
                  #environmentTree
                  a11yTitle="Environment hierarchy visualization"
                  [root]="environmentInjectorTree()!"
                  [nodeEqualityFn]="treeNodesEqualityFn"
                  [config]="environmentTreeConfig"
                  (nodeClick)="selectInjectorByNode($event)"
                  (render)="onTreeRender(environmentTree, $event)"
                />
              </section>
            </div>
          </as-split-area>
          <as-split-area [size]="elHierarchySize()">
            <div class="injector-hierarchy">
              <h2>
                <span>Element Hierarchy</span>
                <ng-docs-ref-button docs="injector-hierarchies" />
              </h2>
              <section class="injector-graph">
                <ng-tree-visualizer
                  #elementTree
                  a11yTitle="Element hierarchy visualization"
                  [root]="elementInjectorTree()!"
                  [nodeEqualityFn]="treeNodesEqualityFn"
                  [config]="elementTreeConfig"
                  (nodeClick)="selectInjectorByNode($event)"
                  (render)="onTreeRender(elementTree, $event)"
                />
              </section>
            </div>
          </as-split-area>
        </as-split>
      </as-split-area>
      @if (injectorProvidersEnabled()) {
        <as-split-area size="40" [minSize]="25">
          <ng-injector-providers
            [injector]="selectedNode()!.data.injector"
            [providers]="providers()"
            (close)="injectorProvidersEnabled.set(false)"
          />
        </as-split-area>
      }
    </as-split>
  </div>
}