<div class="fl-content fl-content-min-height" *ngIf="object">
  <p class="fl-detail" i18n>ID: {{ object.id }}</p>
  <p class="fl-detail" i18n>Created on: <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>Project: {{ object.project }}</p>
  <p class="fl-detail" *ngIf="object.client" i18n>
    Client:
    <a class="active-link"
       [routerLink]="[configService.getPanelUrl('clients-users/clients'), object.client.id]">
      {{object.client.display || object.client.name}}
    </a>
  </p>
  <p class="fl-detail" i18n>Region: {{ object.region }}</p>
  <p *ngIf="object.description" class="fl-detail" i18n>Description: {{ object.description }}</p>
  <p class="fl-detail" i18n>External network: {{ object.network_name }}
    <span *ngIf="object.external_fixed_ips.length">(
    <span *ngFor="let fixed_ips of object.external_fixed_ips; let last = last">
      {{ fixed_ips.ip_address }}{{last ? '' : ', '}}
    </span>)
  </span>
  </p>
  <p class="fl-detail" i18n>Status: {{ object.status }}</p>
  <p class="fl-detail" i18n>Enable SNAT:
    <span *ngIf="object.enable_snat">true</span>
    <span *ngIf="!object.enable_snat">false</span>
  </p>
  <p class="fl-detail" i18n>Distributed:
    <span *ngIf="object.distributed">true</span>
    <span *ngIf="!object.distributed">false</span>
  </p>
  <p class="fl-detail" i18n>Admin state up:
    <span *ngIf="object.admin_state_up">true</span>
    <span *ngIf="!object.admin_state_up">false</span>
  </p>
  <p class="fl-detail" i18n>High availability:
    <span *ngIf="object.ha">true</span>
    <span *ngIf="!object.ha">false</span>
  </p>

  <ul class="fl-detail" *ngIf="object.routes.length" i18n>
    Routes:
    <li class="fl-margin-left" *ngFor="let route of object.routes">
      Destination: {{ route.destination }} - NextHop: {{ route.nexthop }}
    </li>
  </ul>

  <ul class="fl-detail" *ngIf="object.availability_zones.length" i18n>
    Availability zones:
    <li class="fl-margin-left" *ngFor="let zone of object.availability_zones">
      {{ zone }}
    </li>
  </ul>

  <ul class="fl-detail" *ngIf="object.availability_hints.length" i18n>
    Availability hints:
    <li class="fl-margin-left" *ngFor="let hint of object.availability_hints">
      {{ hint }}
    </li>
  </ul>

  <div *ngIf="object.interfaces.length">
    <div class="fl-margin-top">
      <span i18n>Interfaces</span>
      <hr>
    </div>
    <table class="fl-table fl-detail fl-margin-bottom-medium">
      <thead>
      <tr>
        <th i18n>Fixed IP</th>
        <th i18n>Admin state up</th>
        <th class="fl-flex-100" i18n>Network</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let netInt of object.interfaces">
        <td>
          {{ netInt.fixed_ips[0].ip_address }} <br>
        </td>
        <td>
          {{ netInt.admin_state_up }} <br>
        </td>
        <td class="fl-flex-100">
          {{ netInt.network_name }} <br>
        </td>
        <td class="right-align fl-padding-right">
          <app-object-actions [objectActions]="interfaceActions[netInt.id]" [maxVisibleActions]="2">
          </app-object-actions>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
