<div *ngIf="object" layoutDirection="column" class="fl-content fl-content-min-height">
  <div>
    <div class="detail-block">
      <p class="fl-detail" i18n>
        ID: {{ object.id }}</p>
      <p class="fl-detail" i18n>
        Project: {{ object.project }}</p>
      <p class="fl-detail" *ngIf="object.client_id && object.client_full_name" i18n>
        Client:
        <a class="active-link"
           [routerLink]="[config.getPanelUrl('clients-users/clients'), object.client_id]">
          {{object.client_full_name}}
        </a>
      </p>
      <p class="fl-detail" i18n>
        Region: {{ object.region }}</p>
      <p class="fl-detail" i18n>
        Created at: <app-date-displayer [date]="object.created_at" withTime></app-date-displayer></p>
      <p class="fl-detail" *ngIf="object.updated_at" i18n>Updated at: <app-date-displayer [date]="object.updated_at" withTime></app-date-displayer></p>
      <p class="fl-detail" *ngIf="object.router_external" i18n>
        Is default: {{ object.is_default }}</p>
      <p class="fl-detail" i18n>
        Shared: {{object.shared | yesNo}}
      </p>
      <p class="fl-detail" i18n>Status: {{ object.status }}</p>
      <p class="fl-detail" i18n>
        Admin state: {{object.admin_state_up ? 'UP' : 'DOWN'}}
      </p>
      <p class="fl-detail" i18n>
        MTU: {{object.mtu }}
      </p>
      <p class="fl-detail" i18n>
        Port security enabled: {{object.port_security_enabled }}
      </p>
      <p class="fl-detail" i18n>
        DNS domain: {{object.dns_domain | nullValue }}
      </p>
      <p class="fl-detail" i18n>
        Revision: {{object.revision_number }}
      </p>
      <p class="fl-detail" *ngIf="object.description" i18n>Description: {{ object.description | nullValue }}</p>
      <div *ngIf="object.extra">
        <span class="fl-detail" i18n>Extra:</span>
        <ul class="fl-detail">
          <ng-container *ngFor="let extra of object.extra | keyvalue">
            <li *ngIf="extra.value">
              {{ extra.key }} = {{ extra.value }}
            </li>
          </ng-container>
        </ul>
      </div>
      <p class="fl-detail" *ngIf="object.tags && object.tags.length" i18n>
        Tags: <span *ngFor="let tag of object.tags; let last=last">{{tag}}<span *ngIf="!last">, </span></span>
      </p>
      <div class="fl-margin-top" *ngIf="authSvc.feature('openstack.ports')">
        <a [routerLink]="[config.getPanelUrl('openstack/ports')]"
           [queryParams]="{'filtering': 'network:' + object.id}"
           class="active-link" i18n>
          See related ports
        </a>
      </div>
    </div>
  </div>

  <div class="fl-margin-top" *ngIf="object.subnets && object.subnets.length">
    <h2 class="fl-detail" i18n>Subnets</h2>
    <hr>
  </div>

  <table *ngIf="object.subnets && object.subnets.length" class="full-width fl-margin-bottom"
         mat-table [dataSource]="object.subnets">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef i18n>Name</th>
      <td class="position-relative" mat-cell *matCellDef="let subnet">
        {{subnet.name}}
      </td>
    </ng-container>
    <ng-container matColumnDef="network_address">
      <th mat-header-cell *matHeaderCellDef i18n>Network address</th>
      <td mat-cell *matCellDef="let subnet">
        {{subnet.cidr}}
      </td>
    </ng-container>
    <ng-container matColumnDef="ip_version">
      <th mat-header-cell *matHeaderCellDef i18n>IP version</th>
      <td mat-cell *matCellDef="let subnet">
        {{subnet.ip_version }}
      </td>
    </ng-container>
    <ng-container matColumnDef="gateway_ip">
      <th mat-header-cell *matHeaderCellDef i18n>Gateway IP</th>
      <td mat-cell *matCellDef="let subnet">
        {{subnet.gateway_ip }}
      </td>
    </ng-container>
    <ng-container matColumnDef="(actions)">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let subnet">
        <app-object-actions [objectActions]="subnetActions[subnet.id]" [maxVisibleActions]="2">
        </app-object-actions>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>
