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

  <ng-container *ngIf="!object.id && clientSelection && createInClientProject">
    <app-client-autocomplete [control]="routerForm.controls.client" clientsWithEnabledProject></app-client-autocomplete>
  </ng-container>

  <mat-form-field *ngIf="!object.id">
    <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-error>{{fieldErrors['region']}}</mat-error>
  </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>

  <mat-form-field *ngIf="routerForm.contains('availability_zone_hints')">
    <mat-label i18n>Availability zone hints</mat-label>
    <mat-select formControlName="availability_zone_hints"
                i18n-placeholder placeholder="Availability zone hints" multiple>
      <ng-container>
        <mat-option *ngFor="let az of createOptions.availability_zones" [value]="az">
          {{az}}
        </mat-option>
      </ng-container>
    </mat-select>
    <mat-error>{{fieldErrors['availability_zone_hints']}}</mat-error>
  </mat-form-field>

  <mat-form-field *ngIf="!object.id">
    <mat-label i18n>External network selection</mat-label>
    <mat-select formControlName="external_network_id" placeholder="External network selection" i18n-placeholder>
      <mat-option value="" i18n>
        No network
      </mat-option>
      <mat-option *ngFor="let externalNetwork of externalNetworks" [value]="externalNetwork.id">
        {{ externalNetwork.name }} - {{externalNetwork.region}}
      </mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['external_network_id']}}</mat-error>
  </mat-form-field>

  <div *ngIf="!object.id && (!externalNetworks || (externalNetworks && !externalNetworks.length))"
       class="fl-margin-bottom">
    <span i18n>No external networks available</span>
  </div>

  <mat-checkbox formControlName="admin_state_up" color="primary" i18n>Admin state up</mat-checkbox>
</form>
