<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
<p-panel #content [showHeader]="false" class="block-panel">

  <p-tree [value]="zoneNode" layout="horizontal">
    <!-- ZONE node template -->
    <ng-template let-node pTemplate="ZONE">
      <div (contextmenu)="showContextMenu($event, node)">
        <div>
          {{node.label}}
        </div>
        <div>
          {{node.data.subLabel}}
        </div>
      </div>
    </ng-template>

    <!-- HOST node template -->
    <ng-template let-node pTemplate="HOST">
      <div (contextmenu)="showContextMenu($event, node)">
        <div>
          {{node.label}}
        </div>
        <div *ngIf="node.data.subLabel">
          {{node.data.subLabel}}
        </div>
      </div>
    </ng-template>

    <!-- SERVICE node template -->
    <ng-template let-node pTemplate="SERVICE">
      <div (contextmenu)="showContextMenu($event, node)">
        {{node.label}}
      </div>
    </ng-template>
  </p-tree>

  <p-contextMenu #cmZone [model]="contextMenuZone" appendTo="body"></p-contextMenu>
  <p-contextMenu #cmHost [model]="contextMenuHost" appendTo="body"></p-contextMenu>
  <p-contextMenu #cmService [model]="contextMenuService" appendTo="body"></p-contextMenu>
</p-panel>