<div class="row">
  <div class="col-sm-12 col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
          <span i18n>CRUSH map viewer</span>
        </h3>
      </div>
      <div class="panel-body">
        <div class="col-sm-6 col-lg-6">
          <tree [tree]="tree"
                [settings]="{rootIsVisible: false}"
                (nodeSelected)="onNodeSelected($event)">
            <ng-template let-node>
              <span class="label"
                    [ngClass]="{'label-success': ['in', 'up'].includes(node.status), 'label-danger': ['down', 'out'].includes(node.status)}">{{ node.status }}</span>
              <span>&nbsp;</span>
              <span class="node-name" [innerHTML]="node.value"></span>
            </ng-template>
          </tree>
        </div>
        <div class="col-sm-6 col-lg-6 metadata" *ngIf="metadata">
          <legend>{{ metadataTitle }}</legend>
          <cd-table-key-value [data]="metadata"></cd-table-key-value>
        </div>
      </div>
    </div>
  </div>
</div>
