<div class="row">
  <div class="col-6">
    <legend i18n>iSCSI Topology</legend>

    <tree-root #tree
               [nodes]="nodes"
               [options]="treeOptions"
               (updateData)="onUpdateData()">
      <ng-template #treeNodeTemplate
                   let-node
                   let-index="index">
        <i [class]="node.data.cdIcon"></i>
        <span>{{ node.data.name }}</span>
        &nbsp;
        <span class="badge"
              [ngClass]="{'badge-success': ['logged_in'].includes(node.data.status), 'badge-danger': ['logged_out'].includes(node.data.status)}">
          {{ node.data.status }}
        </span>
      </ng-template>
    </tree-root>
  </div>

  <div class="col-6 metadata"
       *ngIf="data">
    <legend>{{ title }}</legend>

    <cd-table #detailTable
              [data]="data"
              columnMode="flex"
              [columns]="columns"
              [limit]="0">
    </cd-table>
  </div>
</div>

<ng-template #highlightTpl
             let-row="row"
             let-value="value">
  <span *ngIf="row.default === undefined || row.default === row.current">{{ value }}</span>
  <strong *ngIf="row.default !== undefined && row.default !== row.current">{{ value }}</strong>
</ng-template>
