<div *ngIf="object" layoutDirection="row" class="fl-content fl-content-min-height">
  <div layoutDirection="column" appFlex="50">
    <p class="fl-detail" i18n>ID: {{object.id}}</p>
    <p *ngIf="authSvc.feature('ui.openstack.images.show-client') && object.client"
       class="fl-detail" i18n>Client:
      <a [routerLink]="config.getPanelUrl('clients-users/clients/' + object.client.id)" class="active-link">
        {{object.client.display || object.client.name}}
      </a>
    </p>
    <p class="fl-detail" i18n>Region: {{object.region | nullValue}}</p>
    <p class="fl-detail" *ngIf="object.project" i18n>Project:
      <a [routerLink]="[config.getPanelUrl('openstack/projects'), object.fleio_project_id]"
         *ngIf="object.fleio_project_id; else noProjectLink"
         class="active-link">
        {{object.project}}
      </a>
      <ng-template #noProjectLink><span>{{object.project}}</span></ng-template>
    </p>
    <p class="fl-detail" i18n>Size: {{object.size / (1024 * 1024 * 1024) | number: '.1-2'}} GB</p>
    <p class="fl-detail" i18n>Minimum memory: {{object.min_ram}} MB</p>
    <p class="fl-detail" i18n>Minimum disk size: {{object.min_disk}} GB</p>
    <p class="fl-detail" i18n>Created at: <app-date-displayer [date]="object.created_at" withTime></app-date-displayer></p>
    <p class="fl-detail" i18n>Updated at: <app-date-displayer [date]="object.updated_at" withTime></app-date-displayer></p>
    <p class="fl-detail" i18n>Architecture: {{object.architecture}}</p>
    <p class="fl-detail" i18n>Container format: {{object.container_format}}</p>
    <p class="fl-detail" i18n>Disk format: {{object.disk_format}}</p>
    <p class="fl-detail" i18n>OS distro: {{object.os_distro}}</p>
    <p class="fl-detail" i18n>Hypervisor type: {{object.hypervisor_type}}</p>
    <p class="fl-detail" i18n>OS version: {{object.os_version}}</p>
    <p class="fl-detail" i18n>Status: {{object.status}}</p>
    <p class="fl-detail" i18n>Visibility: {{object.visibility}}</p>
    <p class="fl-detail" *ngIf="object.related_instance" i18n>Generated from:
      <a [routerLink]="[config.getPanelUrl('openstack/instances'), object.related_instance.id]"
         class="active-link">
        {{object.related_instance.name || object.related_instance.id}}
      </a>
    </p>
    <p class="fl-detail" *ngIf="object.cleanup_date" i18n>Cleanup date: <app-date-displayer [date]="object.cleanup_date" withTime></app-date-displayer></p>
    <p class="fl-detail" *ngIf="object.tags && object.tags.length" i18n>
      Tags: <span *ngFor="let tag of object.tags; let last=last">{{tag}}<span *ngIf="!last">, </span></span>
    </p>
  </div>
  <div layoutDirection="column" appFlex="50" class="wrap-text-content" *ngIf="hasProperties()">
    <p class="fl-detail" i18n>Properties:</p>
    <div layoutDirection="row" *ngFor="let property of object.properties | keyvalue" class="property-row">
      <p appFlex="50" class="fl-detail">{{property.key}}:</p>
      <p appFlex="50" class="fl-detail">{{property.value}}</p>
    </div>
  </div>
</div>
