<div class="fl-content">
  <div layoutDirection="column" appFlex="50">
    <p class="fl-detail" i18n>Region: {{object.region}}</p>
    <p class="fl-detail" i18n>State: {{object.state}}</p>
    <p class="fl-detail" i18n>Status: {{object.status}}</p>
    <p class="fl-detail" i18n>Host IP: {{object.host_ip}}</p>
    <p class="fl-detail" i18n>Hypervisor type: {{object.hypervisor_type}}</p>
    <p class="fl-detail" i18n>Hypervisor version: {{object.hypervisor_version}}</p>
    <p class="fl-detail" i18n>Disk (GB): {{object.local_gb}}</p>
    <p class="fl-detail" i18n>Used disk (GB): {{object.local_gb_used}}</p>
    <p class="fl-detail" i18n>Memory (MB): {{object.memory_mb}}</p>
    <p class="fl-detail" i18n>Used memory (MB): {{object.memory_mb_used}}</p>
    <p class="fl-detail" i18n>vCPUs: {{object.vcpus}}</p>
    <p class="fl-detail" i18n>Used vCPUs: {{object.vcpus_used}}</p>
    <p class="fl-detail" *ngIf="object.running_vms" i18n>Running vms: {{object.running_vms}}</p>
  </div>
  <div layoutDirection="column" appFlex="50" class="wrap-text-content" *ngIf="hasCPUInfo()">
    <p class="fl-detail" i18n>CPU info:</p>
    <div layoutDirection="row" *ngFor="let info of cpuInfo | keyvalue" class="info-row">
      <ng-container *ngIf="info.key !== 'topology'">
        <p appFlex="50" class="fl-detail">{{info.key}}:</p>
        <p appFlex="50" class="fl-detail">{{info.value}}</p>
      </ng-container>
    </div>
    <ng-container *ngIf="cpuInfo?.topology">
      <div layoutDirection="row" class="info-row" *ngFor="let info of cpuInfo.topology | keyvalue">
        <p appFlex="50" class="fl-detail">{{info.key}}:</p>
        <p appFlex="50" class="fl-detail">{{info.value}}</p>
      </div>
    </ng-container>
  </div>
</div>
