<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="flavorForm" *ngIf="createOptions" class="fl-content">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="flavorForm"></app-form-errors>
  <div layoutDirection="column">
    <p *ngIf="!newFlavor" i18n>
      OpenStack does not support the "modify flavor" operation. It's implemented here through the following workaround:
      the current flavor is deleted from OpenStack and re-created (with the same UUID if "Preserve existing flavor ID"
      is checked).
    </p>
    <p *ngIf="!newFlavor" class="fl-important-text fl-no-margin-top" i18n>
      Warning: changing flavor name will cause current instances to no longer show flavor features after running a sync.
      Changing flavor features will not update existing instances info. Also, changing flavor name may cause related
      pricing rules to no longer work.
    </p>
    <mat-checkbox *ngIf="object && object.id" formControlName="preserve_id" color="primary" i18n>
      Preserve existing flavor ID (not recommended for major changes)
    </mat-checkbox>
    <div layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
      <mat-form-field appFlex="auto">
        <mat-label i18n>Flavor name</mat-label>
        <input matInput placeholder="Flavor name" i18n-placeholder type="text" formControlName="name" required>
        <mat-error>{{fieldErrors['name']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="auto">
        <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>
    </div>
    <div layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
      <mat-form-field appFlex="auto">
        <mat-label i18n>Ram in MB</mat-label>
        <input matInput placeholder="Ram in MB" i18n-placeholder type="number" min="1"
               formControlName="memory_mb" required>
        <mat-error>{{fieldErrors['memory_mb']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="auto">
        <mat-label i18n>Virtual CPUs</mat-label>
        <input matInput placeholder="Virtual CPUs" i18n-placeholder type="number"
               formControlName="vcpus" min="1" required>
        <mat-error>{{fieldErrors['vcpus']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="auto">
        <mat-label i18n>Disk size (GB)</mat-label>
        <input matInput placeholder="Disk size (GB)" i18n-placeholder type="number"
               formControlName="root_gb" min="0" required>
        <mat-error>{{fieldErrors['root_gb']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="auto">
        <mat-label i18n>Swap space (MB)</mat-label>
        <input matInput placeholder="Swap space (MB)" i18n-placeholder type="number"
               formControlName="swap" min="0" required>
        <mat-error>{{fieldErrors['swap']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="auto">
        <mat-label i18n>Ephemeral disk space (GB)</mat-label>
        <input matInput placeholder="Ephemeral disk space (GB)" i18n-placeholder type="number"
               formControlName="ephemeral_gb" min="0" required>
        <mat-error>{{fieldErrors['ephemeral_gb']}}</mat-error>
      </mat-form-field>
    </div>
    <div layoutDirection="row">
      <mat-form-field appFlex="auto">
        <mat-label i18n>Description</mat-label>
        <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                  matInput formControlName="description" rows="10"></textarea>
        <mat-error>{{fieldErrors['description']}}</mat-error>
      </mat-form-field>
    </div>
    <mat-checkbox formControlName="is_public" color="primary" i18n>Is public</mat-checkbox>
    <mat-checkbox formControlName="show_for_end_user" color="primary" i18n>
      Show in end user panel
    </mat-checkbox>
    <mat-checkbox *ngIf="flavorForm.contains('use_for_dbaas')" formControlName="use_for_dbaas" color="primary" i18n>
      Use for database instances
    </mat-checkbox>
    <mat-checkbox formControlName="out_of_stock" color="primary" i18n>
      Out of stock
    </mat-checkbox>
  </div>
</form>
