<div *ngIf="object" class="fl-content fl-content-min-height"
     layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
  <div layout="column" appFlex="50" xsFlex="100" smFlex="100">
    <p class="fl-detail" i18n>ID: {{ object.id }}</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>Admin state:
      <span *ngIf="object.admin_state_up">UP</span>
      <span *ngIf="!object.admin_state_up">DOWN</span>
    </p>
    <p class="fl-detail" i18n>Region: {{ object.region }}</p>
    <p class="fl-detail" i18n>MAC address: {{ object.mac_address }}</p>
    <p class="fl-detail" *ngIf="object.device_id" i18n>
      Device id: {{ object.device_id }}
    </p>
    <p class="fl-detail" *ngIf="object.device_owner" i18n>
      Device owner: {{ object.device_owner }}
    </p>
    <p class="fl-detail" i18n>
      Port security enabled: {{ object.port_security_enabled }}
    </p>
    <p *ngIf="object.network" class="fl-detail" i18n>
      Network:
      <a class="active-link"
         [routerLink]="config.getPanelUrl('openstack/networks/' + object.network)">
        {{object.network}}
      </a>
    </p>
    <p *ngIf="securityGroups.length" class="fl-detail" i18n>
      Security groups:
      <ng-container *ngFor="let groupId of securityGroups">
        <a class="active-link"
           [routerLink]="config.getPanelUrl('openstack/security-groups/' + groupId)">
          {{groupId}}</a>,
      </ng-container>
    </p>
    <p *ngIf="object.project && config.authService.feature('ui.openstack.ports.project')"
       class="fl-detail" i18n>
      Project:
      <a class="active-link"
         [routerLink]="config.getPanelUrl('openstack/projects')" [queryParams]="{search:object.project}">
        {{object.project}}
      </a>
    </p>
    <p *ngIf="object.client" class="fl-detail" 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" *ngIf="object.description" i18n>Description: {{ object.description }}</p>
    <h2 class="fl-heading-md fl-margin-bottom-small"
       *ngIf="object.fixed_ips.length" i18n>Fixed IPs</h2>
    <p class="fl-detail">
      <span *ngFor="let fixed_ip of object.fixed_ips">{{ fixed_ip.ip_address }}
        <span *ngIf="fixed_ip.subnet_id" i18n> (subnet: {{ fixed_ip.subnet_id }})</span><br>
      </span>
    </p>
  </div>

  <div layoutDirection="column" appFlex="50" xsFlex="100" smFlex="100">
    <div>
      <p class="fl-detail" i18n>Extra:</p>
      <table class="v-middle table fl-detail fl-grid">
        <tbody>
        <tr *ngFor="let extra of extraDisplay | keyvalue">
          <td class="fl-initial-vertical-align">
            <div>
              {{ extra.key }}
            </div>
          </td>
          <td>
            <div class="wrap-text-content">{{ extra.value }}</div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
