<of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>

<p-panel #content [showHeader]="false" class="block-panel">

  <div class="ui-g">
    <div class="ui-g-6 ui-nopad">
      <h3>Host</h3>
    </div>

    <div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
    </div>
  </div>

  <!-- Host info -->
  <div class="ui-g ui-bottom-space-10">
    <div class="ui-g-12 ui-nopad">
      <p-panel [showHeader]="false">
        <div *ngIf="infraHost">
          <div class="ui-g">
            <div class="ui-g-12 ui-md-6 ui-key-value">
              <of-key-value [key]="'IP ver'" [value]="infraHost.infraZone.metaIPType.name"></of-key-value>
            </div>

            <div class="ui-g-12 ui-md-6 ui-key-value">
              <of-key-value [key]="'CIDR'" [value]="infraHost.infraZone.network"></of-key-value>
            </div>

            <div class="ui-g-12 ui-md-6 ui-key-value">
              <of-key-value [key]="'Interface'" [value]="infraHost.infraZone.iface"></of-key-value>
            </div>

            <div class="ui-g-12 ui-md-6 ui-key-value">
              <of-key-value [key]="'Host Type'" [value]="infraHost.metaTargetHostType.name"></of-key-value>
            </div>

            <div class="ui-g-12 ui-md-6 ui-key-value">
              <of-key-value [key]="'Host IP'" [value]="infraHost.infraZone.address"></of-key-value>
            </div>

            <div class="ui-g-12 ui-md-6 ui-key-value">
              <of-key-value [key]="'Host Mac'" [value]="infraHost.infraZone.mac"></of-key-value>
            </div>

            <div class="ui-g-12 ui-md-6 ui-key-value">
              <of-key-value [key]="'Host OS'" [value]="infraHost.infraHostOS.name"></of-key-value>
            </div>

            <div class="ui-g-12 ui-md-6 ui-key-value">
              <!-- <of-host-ips-overlay [infraHostIPs]="infraHost.infraHostIPs"></of-host-ips-overlay> -->
            </div>

          </div>
        </div>
      </p-panel>
    </div>
  </div>

</p-panel>


<!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
<p-growl [(value)]="msgs"></p-growl> -->