<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]="'IPv4'" [value]="infraHost.ipv4"></of-key-value>
            </div>

            <div class="ui-g-12 ui-md-6 ui-key-value">
              <of-key-value [key]="'IPv6'" [value]="infraHost.ipv6 | uppercase"></of-key-value>
            </div>

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

            <div class="ui-g-12 ui-md-6 ui-key-value">
              <of-key-value [key]="'OS'" [value]="infraHost.infraOS.metaInfraVendor.name"></of-key-value>
            </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> -->