<div class="row split-scroll">
  <div class="col-md-5 col-xs-12 scroll-column no-gutter-r">
    <div class="card bg-level-2 split-scroll overflow-auto">
      <div class="flex-grow">
        <fieldset
          class="card-block large-padding bg-level-2 p-0"
          id="operation-block"
          *ngIf="!!operation"
        >
          <c8y-operation-details [operation]="operation"></c8y-operation-details>
        </fieldset>
      </div>
      <div class="card-block separator sticky-top">
        <div class="input-group input-group-search">
          <input
            class="form-control"
            placeholder="{{ filterLabel | translate }}"
            type="search"
            (keydown.enter)="searchNodes()"
            [(ngModel)]="searchKey"
          />
          <span class="input-group-btn">
            <button
              class="btn btn-dot"
              title="{{ 'Search' | translate }}"
              type="submit"
              *ngIf="!isSearch"
              (click)="searchNodes()"
            >
              <i c8yIcon="search"></i>
            </button>
            <button
              class="btn btn-dot"
              title="{{ 'Clear`input`' | translate }}"
              type="button"
              *ngIf="isSearch"
              (click)="clearSearch()"
            >
              <i c8yIcon="times"></i>
            </button>
          </span>
        </div>
        <div
          class="p-t-16"
          *ngIf="isSearch && !loading"
        >
          <p *ngIf="!searchInProgress">
            <em>{{ nodeList.resultLabel | translate }}</em>
            &nbsp;
            <span class="badge badge-info">{{ nodeList?.length }}</span>
          </p>
        </div>
      </div>

      <div
        class="p-t-8"
        *ngIf="(isSearch && loading) || searchInProgress"
      >
        <c8y-loading></c8y-loading>
      </div>

      <div
        class="inner-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 d-flex': 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="inner-scroll"
        *ngIf="!isSearch"
      >
        <opcua-address-space-tree
          (selectedNode)="toggleCurrentNode($event)"
          [focusEmitter]="focusStatus"
        ></opcua-address-space-tree>
      </div>
      <div class="card-footer separator-top">
        <button
          class="btn btn-default"
          [class.btn-pending]="isOperationRunning()"
          type="button"
          (click)="rescanAddressSpace()"
          [disabled]="isOperationRunning()"
        >
          {{ 'Rescan' | translate }}
        </button>
      </div>
    </div>
  </div>
  <opcua-address-space-detail
    class="col-md-7 col-xs-12 scroll-column no-gutter-l no-pointer"
    [node]="currentNode"
    (toggleAttrDetail)="backHandler($event)"
  ></opcua-address-space-detail>
</div>