<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form appFormSubmit (ngSubmit)="addPort()" [formGroup]="addPortForm">
      <app-form-errors #formErrors [formGroup]="addPortForm"></app-form-errors>
      <div layoutDirection="row">
        <mat-form-field appFlex="100">
          <mat-label i18n>Network</mat-label>
          <mat-select formControlName="network" placeholder="Network" i18n-placeholder>
            <mat-option *ngFor="let network of networks" [value]="network.id">
              {{network.name}} {{network.description ? ("- " + network.description):""}}
            </mat-option>
          </mat-select>
          <mat-error i18n>This field is required</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="row">
        <mat-form-field appFlex="100">
          <mat-label i18n>Subnet</mat-label>
          <mat-select formControlName="subnet" placeholder="Subnet" i18n-placeholder>
            <mat-option *ngFor="let subnet of subnets" [value]="subnet.id">
              {{subnet.name}} ({{subnet.cidr}})
            </mat-option>
          </mat-select>
          <mat-error i18n>This field is required</mat-error>
        </mat-form-field>
      </div>
      <div formArrayName="fixed_ips" layoutDirection="row"
      *ngFor="let fixedIp of addPortForm.get('fixed_ips')['controls']; let i = index;">
        <div [formGroupName]="i" layoutDirection="row">
          <mat-form-field>
            <mat-label i18n>IP address</mat-label>
            <input matInput formControlName="ip_address" placeholder="IP address" i18n-placeholder type="text" required>
            <mat-error i18n>This field is required!</mat-error>
          </mat-form-field>
          <div class="fl-margin-top-medium">
            <button mat-icon-button (click)="removeIp(i)" [attr.fl-tooltip]="removeIpTooltip">
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        </div>

      </div>
      <button mat-mini-fab class="add-item-button fl-margin-left-small fl-margin-bottom-medium"
              [attr.fl-tooltip]="addIpTooltip" fl-tooltip-direction="right"
              (click)="addPortIp()">
        <mat-icon>add</mat-icon>
      </button>
    </form>
  </ng-template>
</app-common-dialog>
