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

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

  <mat-form-field *ngIf="createOptions">
    <mat-label i18n>Region selection</mat-label>
    <mat-select formControlName="region" placeholder="Region selection" i18n-placeholder required>
      <mat-option *ngFor="let region of createOptions.regions" [value]="region.id">
        {{region.id}}<span *ngIf="region.description"> - {{region.description}}</span>
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field *ngIf="hasNetworks; else noNetworks">
    <mat-label i18n>Network selection</mat-label>
    <mat-select formControlName="floating_network" placeholder="Network selection" i18n-placeholder required>
      <mat-option *ngFor="let network of filteredNetworks$ | async" [value]="network.id">
        {{network.name}}<span *ngIf="network.description"> - {{network.description}}</span>
      </mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['floating_network']}}</mat-error>
  </mat-form-field>
  <ng-template #noNetworks>
    <div class="fl-margin-bottom">
      <span i18n>No networks available.<ng-container *ngIf="selectClient && !floatingIpForm.controls?.client?.value"> Select a client first.</ng-container></span>
    </div>
  </ng-template>
  <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>

<div class="fl-margin-right-medium estimated-price-text"
     *ngIf="estimatedCost && createInClientProject"
     [class.invisible]="estimatedCostLoading"
     [class.fl-margin-top-medium]="!estimatedCostLoading"
     [innerHTML]="estimatedCost"></div>
<app-flashing-dots layoutAlign="end center"
                   class="fl-margin-right-small fl-padding-right"
                   *ngIf="estimatedCostLoading"></app-flashing-dots>
