<div layoutDirection="row" layoutDirection-lt-md="column" class="fl-content">
  <div appFlex="100" *ngIf="object">
    <h2 class="fl-heading-md" i18n>Instance specifications</h2>
    <p class="fl-detail" *ngIf="object.image && object.image.id" i18n>Image:
      <a [routerLink]="[config.getPanelUrl('openstack/images'), object.image.id]" class="active-link">
        {{object.image.name || object.image.id}}
      </a>
    </p>
    <p class="fl-detail" *ngIf="object.image && object.image.name && !object.image.id" i18n>
      Image: {{object.image.name}}
      <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:
      <a [routerLink]="[config.getPanelUrl('openstack/flavors'), object.flavor.id]" class="active-link">
        {{object.flavor.name }}
      </a>
    </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="100" *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>Project ID: {{object.project }}</p>
    <p class="fl-detail" i18n>Instance hypervisor: {{object.host_name || object.hostId }}</p>
    <p class="fl-detail" i18n>Created at: <app-date-displayer [date]="object.created" withTime></app-date-displayer></p>
    <p class="fl-detail" *ngIf="object.client" i18n>
      Client:
      <a [routerLink]="[config.getPanelUrl('clients-users/clients'), object.client.id]"
         class="active-link">
        {{ object.client.display }}
      </a>
    </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="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>
