<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form [formGroup]="associateSecurityGroupForm">
      <app-form-errors #formErrors [formGroup]="associateSecurityGroupForm"></app-form-errors>
      <div layoutDirection="row">
        <mat-form-field appFlex="100">
          <mat-label i18n>Security group</mat-label>
          <mat-select formControlName="group" placeholder="Security group" i18n-placeholder required>
            <mat-option
              *ngFor="let securityGroup of securityGroups"
              [value]="securityGroup.id">
              {{securityGroup.name || securityGroup.id}}
            </mat-option>
          </mat-select>
          <mat-error>{{backendErrors['group'] || fieldRequiredTxt}}</mat-error>
        </mat-form-field>
      </div>
    </form>
  </ng-template>
</app-common-dialog>
