<form [formGroup]="imageForm" appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction).subscribe()"
      class="fl-content fl-content-min-height">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="imageForm"></app-form-errors>
  <app-credit-warning *ngIf="!object?.id" resourceName="image" i18n-resourceName></app-credit-warning>
  <div layoutDirection="row" appLayoutGap="10px">
    <div layoutDirection="column" appFlex="50" xsFlex="100" smFlex="100" *ngIf="createOptions">
      <div *ngIf="newImage && selectClient" layoutDirection="row">
        <div layoutDirection="column" appFlex="100">
          <mat-radio-group layoutDirection="column" (ngModelChange)="changeDestination($event)"
                           class="fl-margin-bottom-medium"
                           *ngIf="authSvc.feature('ui.openstack.create-as-admin')"
                           [(ngModel)]="createInClientProject" [ngModelOptions]="{standalone: true}">
            <mat-radio-button [color]="'primary'" [value]="false" i18n>
              Create image in admin project
            </mat-radio-button>
            <mat-radio-button [color]="'primary'" [value]="true" i18n>
              Create image in client's project
            </mat-radio-button>
          </mat-radio-group>

          <ng-container *ngIf="createInClientProject === true">
            <app-client-autocomplete [control]="imageForm.controls.client" clientsWithEnabledProject></app-client-autocomplete>
          </ng-container>
        </div>
      </div>

      <mat-form-field *ngIf="object && !object.id">
        <mat-label i18n>Region</mat-label>
        <mat-select formControlName="region" placeholder="Region" i18n-placeholder>
          <mat-option *ngFor="let region of createOptions.regions"
                      [value]="region.id">
            {{region.id}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Image name</mat-label>
        <input matInput placeholder="Image name" i18n-placeholder type="text" formControlName="name" required>
        <mat-error>{{fieldErrors['name']}}</mat-error>
      </mat-form-field>
      <div layoutDirection="row" appLayoutGap="10px">
        <mat-form-field appFlex="50">
          <mat-label i18n>Minimum disk size (GB)</mat-label>
          <input matInput placeholder="Minimum disk size (GB)" i18n-placeholder type="number"
                 formControlName="min_disk" min="0" required>
          <mat-error>{{fieldErrors['min_disk']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Minimum required RAM (MB)</mat-label>
          <input matInput placeholder="Minimum required RAM (MB)" i18n-placeholder type="number"
                 formControlName="min_ram" min="0" required>
          <mat-error>{{fieldErrors['min_ram']}}</mat-error>
        </mat-form-field>
      </div>
      <mat-form-field>
        <mat-label i18n>Disk format</mat-label>
        <mat-select formControlName="disk_format" placeholder="Disk format" i18n-placeholder>
          <mat-option *ngFor="let diskFormat of createOptions.disk_formats"
                      [value]="diskFormat">
            {{diskFormat}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <div layoutDirection="row" appLayoutGap="10px">
        <mat-form-field appFlex="33">
          <mat-label i18n>OS distro</mat-label>
          <mat-select formControlName="os_distro" placeholder="OS distro" i18n-placeholder>
            <mat-option *ngFor="let osDistro of createOptions.os_distros"
                        [value]="osDistro">
              {{osDistro}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appFlex="33">
          <mat-label i18n>OS version</mat-label>
          <input matInput placeholder="OS version" i18n-placeholder type="text" formControlName="os_version">
          <mat-error>{{fieldErrors['os_version']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="33">
          <mat-label i18n>Architecture</mat-label>
          <mat-select formControlName="architecture" placeholder="Architecture" i18n-placeholder>
            <mat-option *ngFor="let architecture of createOptions.architectures"
                        [value]="architecture[0]">
              {{architecture[1]}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <mat-form-field>
        <mat-label i18n>Hypervisor type</mat-label>
        <mat-select formControlName="hypervisor_type" placeholder="Hypervisor type" i18n-placeholder>
          <mat-option [value]="''" i18n>Any hypervisor</mat-option>
          <mat-option *ngFor="let hypervisorType of createOptions.hypervisor_types"
                      [value]="hypervisorType">
            {{hypervisorType}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Visibility</mat-label>
        <mat-select formControlName="visibility" placeholder="Visibility" i18n-placeholder="">
          <mat-option *ngFor="let visibility of createOptions.visibilities"
                      [value]="visibility">
            {{visibility}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <div>
        <mat-form-field>
          <mat-label i18n>Tags</mat-label>
          <mat-chip-grid #chipGrid aria-label="Enter tags" i18n-aria-label>
            <mat-chip-row *ngFor="let tag of imageForm.controls.tags.value"
                          (removed)="tagRemoved(tag)"
                          [editable]="true"
                          (edited)="tagEdited(tag, $event)">
              {{tag}}
              <button matChipRemove>
                <mat-icon>cancel</mat-icon>
              </button>
            </mat-chip-row>
            <input placeholder="New tag ..."
                   i18n-placeholder
                   [matChipInputFor]="chipGrid"
                   [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                   [matChipInputAddOnBlur]="true"
                   (matChipInputTokenEnd)="addTag($event)"/>
          </mat-chip-grid>
        </mat-form-field>
      </div>

      <mat-checkbox formControlName="protected" color="primary" i18n>Protected</mat-checkbox>

      <div layoutDirection="row" layoutAlign="center" appLayoutGap="10px" *ngIf="object && !object.id">
        <mat-form-field appFlex="20">
          <mat-label i18n>Source</mat-label>
          <mat-select formControlName="source" placeholder="Source" i18n-placeholder class="source-type">
            <mat-option value="url" i18n>URL</mat-option>
            <mat-option *ngIf="authSvc.feature('openstack.images.file_uploads')" value="file" i18n>File</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appFlex="auto" *ngIf="imageForm.controls.source.value === 'url'">
          <mat-label i18n>URL</mat-label>
          <input matInput placeholder="URL" i18n-placeholder type="text" formControlName="url"
                 required class="file-input">
          <mat-error>{{fieldErrors['url']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="auto" *ngIf="imageForm.controls.source.value === 'file'">
          <input #fileInput type="file" (change)="fileChanged($event)" required>
          <input matInput type="text" formControlName="file" required class="hide">
          <mat-error>{{fieldErrors['file']}}</mat-error>
        </mat-form-field>
      </div>
    </div>
    <div layoutDirection="column" appFlex="50" class="hide-xs hide-sm">
      <p i18n>
        <strong>Image name</strong><br>
        Set an image display name that will reflect what the image contains, like it's operating system
        or snapshot of an instance.
      </p>
      <p i18n>
        <strong>Minimum disk size (GB)</strong><br>
        This property will tell OpenStack Compute what the minimum required disk size is for this image.
        <br>
        This allows you to set a limit in order to avoid potential problems while creating an Instance with
        a lower disk size than the installed software on that image.
      </p>
      <p i18n>
        <strong>Minimum required RAM (MB)</strong><br>
        Like the minimum required disk size, this option allows you to set a limit for the minimum required
        RAM an instance created from this image will required in order to run properly.
      </p>
      <p i18n>
        <strong>Visibility</strong><br>
        An image can be set as <strong>private</strong>, making it only available to it's owner, or
        <strong>public</strong>, making it available to everyone. You can also set an image visibility to
        <strong>shared</strong> to allow only image members to access this image. The
        <strong>community</strong>
        visibility behaves similar to <strong>public</strong>
      </p>
      <p i18n>
        <strong>OS distro, OS version and Architecture</strong><br>
        These special attributes allows Fleio to show the distro icon next to each instance created from
        this image
        and allows OpenStack to properly create an Instance especially for Windows or other non Linux
        distributions.
      </p>
      <p i18n>
        <strong>Tags</strong><br>
        Set a list of string tags for the image.
      </p>
      <p i18n>
        <strong>Protected</strong><br>
        Set this option in order to protect the image from accidental deletion
      </p>
    </div>
  </div>
  <div>
    <div class="fl-margin-right-medium estimated-price-text"
         *ngIf="estimatedCost"
         [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>
  </div>
</form>
<mat-progress-bar *ngIf="uploading" class="upload-progress" color="primary" mode="determinate"
                  value="{{uploadProgress}}">
</mat-progress-bar>
