<div class="row split-scroll">
  <div class="col-md-5 col-xs-12 scroll-column no-gutter-r">
    <div class="card bg-gray-lighter split-scroll flex-scroll">
      <div class="card-block separator-bottom">
        <div class="input-group input-group-search" style="margin: -4px 0;">
          <input
            class="form-control"
            type="search"
            placeholder="{{ filterLabel | translate }}"
            (keydown.enter)="searchNodes()"
            [(ngModel)]="searchKey"
          />
          <span class="input-group-btn">
            <button *ngIf="!isSearch" type="submit" class="btn btn-clean" (click)="searchNodes()">
              <i c8yIcon="search"></i>
            </button>
            <button *ngIf="isSearch" class="btn btn-clean" (click)="clearSearch()">
              <i c8yIcon="times"></i>
            </button>
          </span>
        </div>
        <div *ngIf="isSearch && !loading" class="p-t-16">
          <p *ngIf="!searchInProgress">
            <em>{{ nodeList.resultLabel | translate }}</em
            >&nbsp;
            <span class="badge badge-info">{{ nodeList?.length }}</span>
          </p>
        </div>
      </div>

      <div class="p-8" *ngIf="(isSearch && loading) || searchInProgress">
        <div class="spinner p-relative">
          <div class="rect1"></div>
          <div class="rect2"></div>
          <div class="rect3"></div>
          <div class="rect4"></div>
          <div class="rect5"></div>
        </div>
      </div>

      <div class="flex-content-scroll" *ngIf="isSearch && !loading && !searchInProgress">
        <div
          class="list-group list-group-links"
          *ngIf="isSearch && !loading"
          >
          <button
            *ngFor="let nodeItem of nodeList"
            (click)="selectNode(nodeItem)"
            [ngClass]="{ 'list-group-item flex-row': true }"
          >
            <div class="list-group-icon m-r-4">
              <i class="m-r-4" [c8yIcon]="getIcon(nodeItem.nodeClassName)"></i>
            </div>
            <div class="list-item-body text-truncate">
              <span tile="nodeId">{{ nodeItem.nodeId }}</span>
              {{ nodeItem.displayName }}
            </div>
          </button>
        </div>
      </div>
      <div class="flex-content-scroll" *ngIf="!isSearch">
        <opcua-address-space-tree
          (selectedNode)="toggleCurrentNode($event)"
          [focusEmitter]="focusStatus"
        ></opcua-address-space-tree>
      </div>
    </div>
  </div>
  <opcua-address-space-detail
    [node]="currentNode"
    class="col-md-7 col-xs-12 scroll-column no-gutter-l"
    style="pointer-events: none;"
    (toggleAttrDetail)="backHandler($event)"
  ></opcua-address-space-detail>
</div>