<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="volumeForm" *ngIf="createOptions" class="fl-content">
  <app-form-errors #formErrors [formGroup]="volumeForm"></app-form-errors>
  <app-credit-warning *ngIf="!object?.id" resourceName="volume" i18n-resourceName></app-credit-warning>
  <div layoutDirection="row">
    <div layoutDirection="column" appFlex="{{object && !object.id ? 50 : 100}}" ltMdFlex="100">

      <mat-radio-group *ngIf="selectClient && config.authService.feature('ui.openstack.create-as-admin')"
                       layoutDirection="column" (ngModelChange)="changeDestination($event)"
                       [(ngModel)]="createInClientProject" [ngModelOptions]="{standalone: true}">
        <mat-radio-button [color]="'primary'" [value]="false" i18n>
          Create volume in admin project
        </mat-radio-button>
        <mat-radio-button [color]="'primary'" [value]="true" class="fl-margin-bottom-medium" i18n>
          Create volume in client's project
        </mat-radio-button>
      </mat-radio-group>

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

      <mat-form-field>
        <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" (onSelectionChange)="volumeTypeChanged(null)">
            {{region.id}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field *ngIf="showAvailabilityZonesSelect">
        <mat-label i18n>Availability zone</mat-label>
        <mat-select formControlName="availability_zone"
                    i18n-placeholder placeholder="Availability zone">
          <ng-container>
            <mat-option *ngIf="createOptions.availability_zones.length > 1" [value]="''" i18n>Default</mat-option>
            <mat-option *ngFor="let az of createOptions.availability_zones" [value]="az">
              {{az}}
            </mat-option>
          </ng-container>
        </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 class="full-width">
        <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>
      <ng-container formGroupName="source">
        <mat-form-field>
          <mat-label i18n>Select source type</mat-label>
          <mat-select formControlName="source_type" placeholder="Select source type" i18n-placeholder required>
            <mat-option *ngFor="let sourceType of sourceTypes"
                        [value]="sourceType.name">
              {{sourceType.description}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field *ngIf="source.enabled">
          <mat-label i18n>Select source</mat-label>
          <mat-select formControlName="source" placeholder="Select source" i18n-placeholder required>
            <mat-option *ngFor="let source of createOptions.sources[volumeForm.value.source.source_type]"
                        [value]="source.id">
              {{source.name || source.id}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </ng-container>
      <mat-form-field>
        <mat-label i18n>Size (GB)</mat-label>
        <input matInput placeholder="Size (GB)" i18n-placeholder type="number"
               formControlName="size" required
               [step]="selectedVolumeType ? selectedVolumeType.sizeIncrement: 1"
               [min]="selectedVolumeType ? selectedVolumeType.minimumSize: 1">
        <mat-error>{{fieldErrors['size']}}</mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Volume type</mat-label>
        <mat-select formControlName="type" placeholder="Volume type" i18n-placeholder required>
          <mat-option *ngFor="let volumeType of createOptions.types"
                      [value]="volumeType.name" (onSelectionChange)="volumeTypeChanged(volumeType)">
            {{volumeType.type_display}}
          </mat-option>
        </mat-select>
        <mat-error>{{fieldErrors['type']}}</mat-error>
      </mat-form-field>
    </div>
    <div *ngIf="object && !object.id" layoutDirection="column" appFlex="50" class="hide-lt-md">
      <div class="fl-help-text">
        <h3 i18n>New OpenStack Volume</h3>
        <p i18n *ngIf="selectClient">
          You can create a new Volume by first selecting a Client with an OpenStack project assigned
          then a Region where the volume will be created then setting
          the name and a description for it.
        </p>
        <p i18n *ngIf="!selectClient">
          You can create a new Volume by selecting a Region where the volume will be created then setting
          the name and a description for it.
        </p>
        <h3 i18n>Source Selection</h3>
        <p i18n>You can create an empty volume or use an image or an existing volume as a source.
          Selecting a source will copy the data from that source to the new volume.
          In the case you select a bootable image, the volume will also be marked as bootable
          and you will be able to boot directly from that volume.</p>
        <h3 i18n>Size</h3>
        <p i18n>Enter the size of the new volume. This size must be equal of higher than the source size if
          any source is selected. For example, if an image has a minimum size of 3GB, the new volume size
          must be at least 3GB.</p>
        <h3 i18n>Type</h3>
        <p i18n>A volume type can also be set while creating the volume.
          All volume types available in the selected region will be available to select from.</p>
      </div>
    </div>
  </div>
</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>

