<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="15 35 140 100">
              <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" attr.xlink:href="assets/image/node/icon/icon_{{service.serviceType | lowercase}}.svg" />
              <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" attr.xlink:href="assets/image/node/logo/logo_{{service.key | lowercase}}.svg" />
            </svg> -->
      <svg width="140" height="140" viewBox="20 10 140 140">
        <image x="-10" y="-5" width="200" height="200" preserveAspectRatio="xMidYMid slice" attr.xlink:href="assets/image/node/icon/icon_{{service.serviceType | lowercase}}.svg" />
        <image *ngIf="service.key !== 'UNKNOWN'" x="-10" y="-5" width="200" height="200" preserveAspectRatio="xMidYMid slice"
          attr.xlink:href="assets/image/node/logo/logo_{{service.key | lowercase}}.svg" />
      </svg>
    </div>
    <h3>
      {{service.name}} {{service.port.host.address}}
    </h3>
  </div>


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

      <ul class="key-value">
        <li *ngIf="service.key">
          Name
          <span class="meta-value">{{service.key}}</span>
        </li>
        <li *ngIf="service.port">
          Port
          <span class="meta-value">{{service.port.metaPortType.key}} {{service.port.portNumber}}</span>
        </li>
        <li *ngIf="service.description">
          Description
          <span class="meta-value">{{service.description}}</span>
        </li>
        <li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'">
          Crypto Type
          <span class="meta-value">{{service.metaCryptoType.name}}</span>
        </li>
      </ul>

    </p-tabPanel>

    <p-tabPanel header="Metadata" *ngIf="service.meta">
      <div of-auto-height key="1">
        <perfect-scrollbar>
          <ul class="detail-content-meta-title">
            <li *ngFor="let key of service.meta | objectKeys">
              {{key | stringPrettify}}

              <ul class="key-value">
                <li *ngFor="let skey of service.meta[key] | objectKeys">
                  {{skey | stringPrettify}}
                  <span class="meta-value">{{service.meta[key][skey]}}</span>
                </li>
              </ul>
            </li>
          </ul>
        </perfect-scrollbar>
      </div>
    </p-tabPanel>

    <p-tabPanel header="Health" *ngIf="service.port.metaPortType.key === 'TCP'">

      <div class="ui-g">
        <div class="ui-ping-row">
          <div class="title">Count </div>
          <p-spinner size="1" [(ngModel)]="count" [min]="1" [max]="30"></p-spinner>
        </div>
        <div class="ui-ping-row">
          <div class="title">Interval </div>
          <p-spinner size="1" [(ngModel)]="interval" [min]="0" [max]="5"></p-spinner>
        </div>
        <div class="ui-ping-row">
          <div class="title">Deadline </div>
          <p-spinner size="1" [(ngModel)]="deadline" [min]="1" [max]="10"></p-spinner>
        </div>
      </div>
      <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
      <div class="ui-ping-result">
        <p-progressBar *ngIf="pingWaiting" mode="indeterminate"></p-progressBar>
        <p-table [value]="pingResult.responses | objectKeys" *ngIf="!pingWaiting && pingResult" [scrollable]="true"
          scrollHeight="200px">
          <ng-template pTemplate="header">
            <tr>
              <th style="width: 3.25em">No.</th>
              <th>Response Time (ms)</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-key let-i="rowIndex">
            <tr>
              <td style="width: 3.25em">
                {{i + 1}}
              </td>
              <td>
                {{pingResult.responses[key].time}}
                {{pingResult.responses[key].error}}
              </td>
            </tr>
          </ng-template>
        </p-table>
      </div>

    </p-tabPanel>

  </p-tabView>

</div>