<div class="fl-content fl-content-min-height" *ngIf="object">
  <p i18n>ID: {{object.id }}</p>
  <p i18n>Created at: <app-date-displayer [date]="object.created_at" withTime></app-date-displayer></p>
  <p *ngIf="object.updated_at" i18n>Updated at: <app-date-displayer [date]="object.updated_at" withTime></app-date-displayer></p>
  <p i18n>Region: {{object.region}}</p>
  <p *ngIf="object.client && config.authService.feature('ui.openstack.clusters.show-client-on-info')" i18n>
    Client:
    <a class="active-link"
       [routerLink]="[config.getPanelUrl('clients-users/clients'), object.client.id]">
      {{object.client.display || object.client.name}}
    </a>
  </p>
  <p *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 *ngIf="object.cluster_template" i18n>
    Cluster template:
    <a class="active-link"
       [routerLink]="[config.getPanelUrl('openstack/cluster-templates'), object.cluster_template.id]">
      {{object.cluster_template.name}}
    </a>
  </p>
  <p *ngIf="object.status_reason" i18n>
    Status reason: <span [innerHTML]="object.status_reason"></span>
  </p>
  <div *ngIf="hasFaults">
    <p i18n>Faults</p>
    <div layoutDirection="row" appLayoutGap="10px" *ngFor="let fault of object.faults | keyvalue" class="fl-margin-top-small">
      <div>
        {{fault.key}}
      </div>
      <div>
        {{fault.value}}
      </div>
    </div>
  </div>
</div>
