<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="securityGroupForm" layoutDirection="column" class="fl-content">
  <app-form-errors #formErrors [formGroup]="securityGroupForm"></app-form-errors>
  <app-credit-warning resourceName="security group" i18n-resourceName></app-credit-warning>
  <mat-radio-group *ngIf="isCreateForm && selectClient" layoutDirection="column" (ngModelChange)="changeDestination($event)"
    [(ngModel)]="createInClientProject" [ngModelOptions]="{standalone: true}">
    <mat-radio-button [color]="'primary'" [value]="false" i18n>
      Create security group in admin project
    </mat-radio-button>
    <mat-radio-button [color]="'primary'" [value]="true" class="fl-margin-bottom-medium" i18n>
      Create security group in client's project
    </mat-radio-button>
  </mat-radio-group>

  <ng-container *ngIf="isCreateForm && selectClient && createInClientProject">
    <app-client-autocomplete [control]="securityGroupForm.controls.client" clientsWithEnabledProject></app-client-autocomplete>
  </ng-container>

  <mat-form-field appFlex="100" *ngIf="isCreateForm && createOptions">
    <mat-label i18n>Region</mat-label>
    <mat-select formControlName="region" placeholder="Region" i18n-placeholder required>
      <mat-option *ngFor="let region of createOptions.regions"
                  [value]="region.id">
        {{region.id}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>Name</mat-label>
    <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name" required>
    <mat-error>{{fieldErrors['name']}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>Description</mat-label>
    <input matInput placeholder="Description" i18n-placeholder type="text" formControlName="description">
    <mat-error>{{fieldErrors['description']}}</mat-error>
  </mat-form-field>
</form>
