<div class="ui-g-12">

  <div class="ui-g detail-img">
    <!-- <svg width="200" height="200" viewBox="20 40 140 100">
              <image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="assets/image/node/logo/logo_tomcat.svg" />
            </svg> -->
    <div class="svg-div">
      <svg width="140" height="140" viewBox="0 0 140 140">
        <image x="0" y="0" width="140" height="140" preserveAspectRatio="xMidYMid slice" xlink:href="assets/image/node/icon/icon_overflow.svg" />
      </svg>
    </div>
    <h3>
      {{zone.network}}
    </h3>
  </div>

  <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">

    <p-tabPanel header="General">
      <div of-auto-height key="0">
        <perfect-scrollbar>
          <ul class="key-value">
            <li *ngIf="zone.iface">
              Interface
              <span class="meta-value">{{zone.iface}}</span>
            </li>
            <li *ngIf="zone.mac">
              Mac Address
              <span class="meta-value">{{zone.mac}}</span>
            </li>
            <li *ngIf="zone.metaIPType">
              IP Version
              <span class="meta-value">{{zone.metaIPType.key}}</span>
            </li>
            <li *ngIf="zone.network">
              Network
              <span class="meta-value">{{zone.network}}</span>
            </li>
            <li *ngIf="zone.network">
              IP Range
              <span class="meta-value">{{ipRange}}</span>
            </li>
          </ul>
        </perfect-scrollbar>
      </div>
    </p-tabPanel>

    <p-tabPanel header="Hosts">
      <div of-auto-height key="1">
        <perfect-scrollbar>
          <ul class="key-value">
            <li *ngFor="let host of zone.hostList | ipSort: 'address'">
              <a href="javascript:void(0)" (click)="hostSelected(host)" style="text-decoration:none">
                <span class="meta-value">{{host.address}}</span> <span *ngIf="host.name" class="meta-value">
                  ({{host.name}})</span>
              </a>
            </li>
          </ul>
        </perfect-scrollbar>
      </div>
    </p-tabPanel>
  </p-tabView>
</div>