<div *ngIf="object" layoutDirection="column" class="fl-content fl-content-min-height">
  <p class="fl-detail" *ngIf="object.client" i18n>
    Client:
    <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/clients'), object.client.id]">
      {{ object.client.display || object.client.name }}
    </a>
  </p>
  <p class="fl-detail" i18n>Floating IP address: {{object.floating_ip_address }} </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>Network id: {{object.floating_network.id }} </p>
  <p class="fl-detail" i18n>Network name: {{object.floating_network.name }} </p>
  <p class="fl-detail" i18n>Router id: {{object.router?.id | nullValue }} </p>
  <p class="fl-detail" i18n>Router name: {{object.router?.name | nullValue }} </p>
  <p class="fl-detail" i18n>Fixed ip address: {{ object.fixed_ip_address | nullValue }}</p>
  <p class="fl-detail" i18n>Port id: {{ object.port?.id | nullValue }}</p>
  <ng-container *ngIf="object.associated_object">
    <p class="fl-detail" i18n>
      Associated to instance:
      <a [routerLink]="[config.getPanelUrl('openstack/instances'), object.associated_object.id]"
         class="active-link">
        {{ object.associated_object.name }}
      </a>
    </p>
    <p *ngIf="!object.associated_object.device_type" class="fl-detail" i18n>Associated to object:
      {{ object.associated_object.id }}
    </p>
  </ng-container>
  <p class="fl-detail" *ngIf="!object.associated_object" i18n>No associated object</p>
  <p class="fl-detail" i18n>Description: {{ object.description | nullValue }}</p>
</div>
