<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form appFormSubmit (ngSubmit)="associateIp()" [formGroup]="associateIpForm" appFlex="100" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="associateIpForm"></app-form-errors>
      <mat-form-field appFlex="100">
        <mat-label i18n>Floating IPs</mat-label>
        <mat-select formControlName="floating_ip" i18n-placeholder placeholder="Floating IPs" required>
          <mat-option *ngFor="let ip of data.freeIps" [value]="ip.floating_ip_address">
            {{ip.floating_ip_address}}
          </mat-option>
        </mat-select>
        <mat-error>{{associateIpForm.controls.floating_ip.errors | errorFormatter}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="100">
        <mat-label i18n>Ports</mat-label>
        <mat-select formControlName="fixed_ip" i18n-placeholder placeholder="Ports" required>
          <mat-option *ngFor="let port of data.ports" [value]="port">
            {{ port.id }}<span *ngIf="port.fixed_ips && port.fixed_ips.length"> - {{ port.fixed_ips[0].ip_address }}</span>
          </mat-option>
        </mat-select>
        <mat-error>{{associateIpForm.controls.fixed_ip.errors | errorFormatter}}</mat-error>
      </mat-form-field>
    </form>
  </ng-template>
</app-common-dialog>
