<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="uploadToImageForm" *ngIf="imageCreateOptions" class="fl-content">
  <app-form-errors #formErrors [formGroup]="uploadToImageForm"></app-form-errors>
  <div layoutDirection="row">
    <div layoutDirection="column" appFlex="{{object && !object.id ? 50 : 100}}" ltMdFlex="100">
      <mat-form-field>
        <mat-label i18n>Image name</mat-label>
        <input matInput placeholder="Image name" i18n-placeholder type="text" formControlName="image_name" required>
        <mat-error>{{fieldErrors['image_name']}}</mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Disk format</mat-label>
        <mat-select formControlName="disk_format" placeholder="Disk format" i18n-placeholder required>
          <mat-option *ngFor="let diskFormat of imageCreateOptions.disk_formats"
                      [value]="diskFormat">
            {{diskFormat}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div *ngIf="object && !object.id" layoutDirection="column" appFlex="50" class="hide-lt-md">
      <div class="fl-help-text">
        <h3 i18n>Description</h3>
        <p i18n>
          Upload the volume to the Image Service as an image. This is equivalent to the cinder upload-to-image command.
        </p>
        <p i18n>
          Choose "Disk Format" for the image. The volume images are created with the QEMU disk image utility.
        </p>
      </div>
    </div>
  </div>
</form>
