<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form appFormSubmit (ngSubmit)="addIpsAutomatically()" [formGroup]="addIpAutomaticallyForm">
      <app-form-errors #formErrors [formGroup]="addIpAutomaticallyForm"></app-form-errors>
      <div layoutDirection="row">
        <mat-form-field appFlex="100">
          <mat-label i18n>Port</mat-label>
          <mat-select formControlName="port" placeholder="Port" i18n-placeholder (selectionChange)="changeSubnets()">
            <mat-option *ngFor="let port of ports" [value]="port.id">
              {{port.name ? port.name + ' - ' + port.id : port.id}}
            </mat-option>
          </mat-select>
          <mat-error i18n>This field is required</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="row" *ngIf="addIpAutomaticallyForm.controls.port.value">
        <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 layoutDirection="row">
        <mat-form-field>
          <mat-label i18n>IP(s) to allocate</mat-label>
          <input matInput [(ngModel)]="ipsToAllocate" [ngModelOptions]="{standalone: true}"
                 placeholder="IP(s) to allocate" i18n-placeholder type="number" min="1" step="1"
                 required>
          <mat-error i18n>This field is required!</mat-error>
        </mat-form-field>
      </div>
    </form>
  </ng-template>
</app-common-dialog>
