<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/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/icon/icon_{{host.hostType | lowercase}}.svg" />
              <image *ngIf="host.hostType === 'HOST'" x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice"
                attr.xlink:href="../../assets/image/logo/logo_{{host.osType | lowercase}}.svg"></image>
            </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/icon/icon_{{host.hostType | lowercase}}.svg" />
        <image *ngIf="host.hostType === 'HOST'" x="-10" y="-5" width="200" height="200" preserveAspectRatio="xMidYMid slice"
          attr.xlink:href="../../assets/image/logo/logo_{{host.osType | lowercase}}.svg" />
      </svg>
    </div>
    <h3>{{host.name}} <span>{{host.address}}</span></h3>
  </div>

  <p-tabView class="detail-content">
    <p-tabPanel header="General">

      <ul class="key-value">

        <li *ngIf="host.address">
          IP Address
          <span class="meta-value">{{host.address}}</span>
        </li>

        <li *ngIf="host.deviceType">
          Type
          <span class="meta-value">{{host.deviceType}}</span>
        </li>
        <li *ngIf="host.deviceVendor">
          Vendor
          <span class="meta-value">{{host.deviceVendor}}</span>
        </li>
        <li *ngIf="host.model">
          Model
          <span class="meta-value">{{host.model}}</span>
        </li>

        <li *ngIf="host.osType">
          OS
          <span class="meta-value">{{host.osType}}</span>
        </li>

        <li *ngIf="host.mac">
          Mac Address
          <span class="meta-value">{{host.mac}}</span>
        </li>

      </ul>
    </p-tabPanel>

    <p-tabPanel header="Metadata" *ngIf="host.meta">
      <ul class="detail-content-meta-title">
        <li *ngFor="let key of host.meta | objectKeys">
          {{key | stringPrettify}}

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

    <p-tabPanel header="Ports" *ngIf="host.portList">
      <ul class="key-value">
        <li *ngFor="let port of host.portList | sort: 'portNumber'">
          <span class="meta-value">{{port.portNumber}} ({{port.metaPortType.key}})</span>
        </li>
      </ul>
    </p-tabPanel>

    <p-tabPanel header="Health">

      <div class="ui-g-10 ui-g-offset-2">Retries :
        <input type="number" pInputText style="width:100px;" [(ngModel)]="retries" min="1" max="10">
      </div>
      <!-- <div class="ui-g-10 ui-g-offset-2">Interval :
              <input type="text" pInputText placeholder="3" style="width:100px;" [(ngModel)]="interval" (ngModelChange)="validateIP($event, 0)"
                (keypress)="ipPressed($event)">
            </div>
            <div class="ui-g-10 ui-g-offset-2">Deadline :
              <input type="text" pInputText placeholder="3" style="width:100px;" [(ngModel)]="deadline" (ngModelChange)="validateIP($event, 0)"
                (keypress)="ipPressed($event)">
            </div> -->

      <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
      <br />
      <textarea style="width: 100%; height: 200px" pInputTextarea autoResize="autoResize" [(ngModel)]="healthResponse"></textarea>

      <div *ngIf="pingWaiting">
        Checking....
      </div>
      <div *ngIf="pingResult">
        <ul>
          <li *ngFor="let key of pingResult.responses | objectKeys">
            <span *ngIf="pingResult.responses[key].error else value">
              {{pingResult.responses[key].error}}
            </span>
            <ng-template #value>
              TTL={{pingResult.responses[key].ttl}} : {{pingResult.responses[key].time}}ms
            </ng-template>
          </li>
        </ul>

        <div>
          <div *ngIf="pingResult.summary.sendCount">Sent: {{pingResult.summary.sendCount}}</div>
          <div *ngIf="pingResult.summary.receiveCount">Received: {{pingResult.summary.receiveCount}}</div>
          <div *ngIf="pingResult.summary.lossPercent">Loss: {{pingResult.summary.lossPercent}} %</div>
          <div *ngIf="pingResult.summary.avgTime">Avg: {{pingResult.summary.avgTime}} ms</div>
          <div *ngIf="pingResult.summary.minTime">Min: {{pingResult.summary.minTime}} ms</div>
          <div *ngIf="pingResult.summary.maxTime">Min: {{pingResult.summary.maxTime}} ms</div>
        </div>

      </div>
    </p-tabPanel>
  </p-tabView>

</div>