<div layoutDirection="column" *ngIf="object" class="fl-content fl-content-min-height">
  <p class="fl-detail" i18n>ID: {{object.id}}</p>
  <p class="fl-detail" *ngIf="config.authService.feature('ui.openstack.volumes.client')" i18n>
    Client:
    <a *ngIf="object.client; else noClient" class="active-link"
       [routerLink]="config.getPanelUrl('clients-users/clients/' + object.client.id)">
      {{object.client.display || object.client.name}}
    </a>
    <ng-template #noClient>n/a</ng-template>
  </p>
  <p class="fl-detail" i18n>Size: {{object.size}} GB</p>
  <p class="fl-detail" i18n>Type: {{object.type | nullValue}}</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>Bootable: {{object.bootable}}</p>
  <p *ngIf="showAvailabilityZone" class="fl-detail" i18n>Availability zone: {{object.availability_zone | nullValue}}</p>
  <p *ngIf="this.object.related_instances_uuid && this.object.related_instances_uuid.length" class="fl-detail" i18n>
    This volume is attached to
    <ng-container *ngFor="let related_instance_uuid of this.object.related_instances_uuid; let last=last">
      <a class="active-link"
         [routerLink]="config.getPanelUrl('openstack/instances', related_instance_uuid)">
        {{related_instance_uuid}}</a><span *ngIf="!last">,</span>
    </ng-container>
  </p>
</div>
