<div layoutDirection="row" layoutDirection-lt-md="column" class="fl-content">
  <div appFlex="33" *ngIf="object">
    <h2 class="fl-heading-md" i18n>Instance specifications</h2>
    <p class="fl-detail" *ngIf="object.image" i18n>
      Image: {{object.image.name || object.image.id}}
      <span *ngIf="object.image.os_distro && object.image.os_version">
        ({{object.image.os_distro}} {{object.image.os_version}})
      </span>
    </p>

    <p class="fl-detail" *ngIf="object.flavor" i18n>Flavor: {{object.flavor.name }}</p>

    <div *ngIf="object.flavor">
      <p class="fl-detail" i18n>
        Memory: {{ ramDisplay }}
      </p>

      <p class="fl-detail" i18n>Virtual CPUs: {{object.flavor.vcpus }}</p>
    </div>
    <div class="fl-detail"
         *ngIf="object.storage_details.local_storage || object.storage_details.volume_attachments.length">
      <span i18n>Storage</span>
      <ul class="instance-details-storage-list">
        <li *ngIf="object.storage_details.local_storage && !object.storage_details.hide_local_storage"
            class="fl-detail" i18n>
          Local storage: {{ object.storage_details.local_storage }} GB
          <span *ngIf="object.image">(boot)</span>
        </li>
        <li *ngFor="let vol_att of object.storage_details.volume_attachments" class="fl-detail" i18n>
          Volume:
          <a class="active-link"
             [routerLink]="[config.getPanelUrl('openstack/volumes'), vol_att.volume_id]">
            {{ vol_att.volume_name || vol_att.volume_id }}</a>: {{ vol_att.size }} GB
          <span *ngIf="vol_att.is_boot">
            (boot<span *ngIf="vol_att.delete_on_termination">, delete</span>)
          </span>
        </li>
      </ul>
    </div>
  </div>
  <div appFlex="33" *ngIf="object">
    <h2 class="fl-heading-md" i18n>Network details</h2>
    <ul *ngFor="let group of object.net_details.grouped_ips">
      <li class="fl-detail fl-margin-left">{{ group.network_name }}:
        <div class="fl-margin-left">
          <div *ngIf="group.ipv4s.length">
            IPv4:<br>
            <span *ngFor="let ip of group.ipv4s" class="fl-margin-left">
              {{ ip.ip_address }}
              <a class="active-link" *ngIf="authSvc.feature('openstack.dns.ptr')"
                 (click)="getPTR(ip.ip_address)">
                <strong title="Set reverse DNS (PTR record)" i18n-title i18n>rDNS</strong>
              </a>
              <br>
            </span>
          </div>
          <div *ngIf="group.ipv6s.length">
            IPv6:<br>
            <span *ngFor="let ip of group.ipv6s" class="fl-margin-left">
              {{ ip.ip_address }}
              <a class="active-link" *ngIf="authSvc.feature('openstack.dns.ptr')"
                 (click)="getPTR(ip.ip_address)">
                <strong title="Set reverse DNS (PTR record)" i18n-title i18n>rDNS</strong>
              </a>
              <br>
            </span>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div appFlex="33" *ngIf="object">
    <h2 class="fl-heading-md" i18n>Other details</h2>
    <p class="fl-detail" i18n>Instance UUID: {{object.uuid }}</p>
    <p class="fl-detail" i18n>Created at: <app-date-displayer [date]="object.created" withTime></app-date-displayer></p>
    <p class="fl-detail" i18n>Region: {{object.region }}</p>
    <p class="fl-detail" i18n>Availability zone: {{object.availability_zone}}</p>
    <p class="fl-detail" *ngIf="authSvc.feature('openstack.instances.show_hypervisors')" i18n>Instance hypervisor: {{object.host_name || object.hostId }}</p>
    <p class="fl-detail" *ngIf="object.locked">
      <span i18n>Instance is locked</span>
    </p>
    <div *ngIf="object.traffic_type === 'all'">
      <p *ngIf="authSvc.feature('openstack.instances.traffic')" class="fl-detail" i18n>
        Total traffic this billing cycle: {{object.current_cycle_traffic }} GB
      </p>
      <p *ngIf="authSvc.feature('openstack.instances.traffic')" class="fl-detail" i18n>
        Total traffic this month: {{object.current_month_traffic }} GB
      </p>
    </div>
    <div *ngIf="object.traffic_type === 'public'">
      <p *ngIf="authSvc.feature('openstack.instances.traffic')" class="fl-detail" i18n>
        Public traffic this billing cycle: {{object.current_cycle_traffic }} GB
      </p>
      <p *ngIf="authSvc.feature('openstack.instances.traffic')" class="fl-detail" i18n>
        Public traffic this month: {{object.current_month_traffic }} GB
      </p>
    </div>
  </div>
</div>
