<div
  class="card-block"
  *ngIf="dataSource && !loading"
>
  <cdk-tree
    [dataSource]="dataSource"
    [treeControl]="nestedTreeControl"
  >
    <!-- This is the tree node template for leaf nodes -->
    <cdk-nested-tree-node
      class="interact"
      *cdkTreeNodeDef="let node"
      (click)="toggleFocusedNode(node)"
      [ngClass]="{ strong: isFocusedNode(node) }"
    >
      <span>
        <i
          class="m-r-4 interact"
          [c8yIcon]="getIcon(node.nodeClassName)"
          [ngClass]="{ strong: isFocusedNode(node) }"
        ></i>
        {{ node.displayName }}
      </span>
    </cdk-nested-tree-node>
    <!-- This is the tree node template for expandable nodes -->
    <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasChild">
      <div role="group">
        <div class="d-flex a-i-center">
          <button
            class="btn-clean text-primary m-r-4"
            title="{{ 'Expand node' | translate }}"
            cdkTreeNodeToggle
            [disabled]="node.currentlyLoadingChildren"
          >
            <i
              [ngClass]="{
                'dlt-c8y-icon-plus-square': !node.expanded,
                'dlt-c8y-icon-minus-square': node.expanded
              }"
            ></i>
          </button>
          <i
            class="m-r-4 interact"
            [c8yIcon]="getIcon(node.nodeClassName)"
          ></i>
          <span
            class="interact"
            (click)="toggleFocusedNode(node)"
            [ngClass]="{ strong: isFocusedNode(node) }"
          >
            {{ node.displayName }}
          </span>
          <span
            class="m-l-4"
            [style.visibility]="node.currentlyLoadingChildren ? 'visible' : 'hidden'"
          >
            <i class="dlt-c8y-icon-circle-o-notch icon-spin"></i>
          </span>
        </div>
        <ng-container cdkTreeNodeOutlet></ng-container>
      </div>
    </cdk-nested-tree-node>
  </cdk-tree>
</div>
<div
  class="p-t-8"
  *ngIf="loading"
>
  <c8y-loading></c8y-loading>
</div>
<div
  class="alert alert-info m-t-16"
  *ngIf="!dataSource && !loading"
  translate
>
  No source data available to fetch address space.
</div>