<div *ngIf="object" class="fl-content" layoutDirection="column">
  <ng-container *ngIf="object.pools && object.pools.length > 0; else noPools">
    <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
          [formGroup]="associateFloatingIpForm">
      <!--suppress JSUnusedGlobalSymbols -->
      <app-form-errors #formErrors [formGroup]="associateFloatingIpForm"></app-form-errors>
      <div layoutDirection="column">
        <mat-form-field>
          <mat-label i18n>Select a floating IP</mat-label>
          <mat-select formControlName="ip" placeholder="Select a floating IP" i18n-placeholder>
            <mat-option *ngFor="let ip of associateFloatingIpOptions.available_ips" [value]="ip.id">
              {{ip.floating_ip_address}}<span *ngIf="ip.description"> - {{ip.description}}</span>
            </mat-option>
          </mat-select>
          <mat-error>{{associateFloatingIpForm.controls.ip.errors | errorFormatter}}</mat-error>
        </mat-form-field>
      </div>
    </form>
  </ng-container>
  <ng-template #noPools>
    <p class="fl-detail" layoutAlign="center center" i18n>No floating IPs available.</p>
  </ng-template>
</div>
