<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="instanceForm" *ngIf="createOptions" class="fl-content" autocomplete="off">
  <input type="text" class="hide" name="username" autocomplete="false" tabindex="-1"/>
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="instanceForm"></app-form-errors>
  <app-credit-warning resourceName="instance" i18n-resourceName></app-credit-warning>
  <div layoutDirection="row"
       *ngIf="selectClient">
    <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 instance in admin project
        </mat-radio-button>
        <mat-radio-button [color]="'primary'" [value]="true" i18n>
          Create instance in client's project
        </mat-radio-button>
      </mat-radio-group>

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

  <div [hidden]="!(clientControl.value && clientControl.value.id) && selectClient && createInClientProject">
    <div layoutDirection="row" appLayoutGap="5px">
      <div layoutDirection="column" appFlex="50">
        <mat-form-field>
          <mat-label i18n>Name</mat-label>
          <input matInput i18n-placeholder placeholder="Name" type="text" autocomplete="off"
                 formControlName="name" required>
          <mat-error>{{ fieldErrors['name'] }}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="column" appFlex="50">
        <mat-form-field>
          <mat-label i18n>Region</mat-label>
          <mat-select formControlName="region" i18n-placeholder placeholder="Region"
                      (ngModelChange)="refreshCreateOptions()">
            <mat-option *ngFor="let region of createOptions.region" [value]="region.id">{{ region.id }}</mat-option>
          </mat-select>
          <mat-error>{{ fieldErrors['region'] }}</mat-error>
        </mat-form-field>
      </div>
    </div>

    <div *ngIf="flavorsAsCards" class="fl-margin-bottom-small">
      <span *ngIf="selectedBootSource && selectedBootSource.object && createOptions &&
      !createOptions.flavor.length" class="fl-red-color" i18n>
        No compatible flavors found for selected boot source!
      </span>
      <app-flavors-as-cards #flavorsAsCards
                            (choseFlavor)="onFlavorChosen($event)"
                            [flavors]="createOptions.flavor">
      </app-flavors-as-cards>
    </div>

    <div layoutDirection="row" appLayoutGap="5px" layoutDirection-lt-md="column">
      <div layoutDirection="column" appFlex="50" ltMdFlex="100">
        <div class="fl-margin-top-small">
          <h2 class="fl-heading-md" i18n>Select boot source</h2>
        </div>
        <app-boot-source-select [images]="createOptions.bootSources.image"
                                [communityImages]="createOptions.bootSources.community_image"
                                [ownedImages]="createOptions.bootSources.owned_image"
                                [sharedImages]="createOptions.bootSources.shared_image"
                                [volumes]="createOptions.bootSources.volume"
                                [volumeSnapshots]="createOptions.bootSources.volume_snapshot"
                                [requestedImages]="createOptions.bootSources.requested_image"
                                [volumeTypes]="createOptions.bootSources.volume_types"
                                [requestedBootSource]="createOptions.bootSources.requested_boot_source"
                                [cinderAz]="createOptions.cinder_az"
                                [hideVolumeAz]="createOptions.hide_volume_az"
                                [selectedFlavor]="getSelectedFlavor()"
                                [selectedRegionName]="instanceForm.controls.region.value"
                                (selectedBootSourceInter)="onBootSourceChange($event)"
                                #bootSourceSelectComponent>

        </app-boot-source-select>
      </div>
      <div *ngIf="!flavorsAsCards" layoutDirection="column" appFlex="50" ltMdFlex="100">
        <div class="fl-margin-top-small">
          <h2 class="fl-heading-md" i18n>Select configuration</h2>
        </div>
        <div class="fl-bordered-box" appFlex="100%">
            <span *ngIf="selectedBootSource && selectedBootSource.object && createOptions &&
            !createOptions.flavor.length"
                  class="fl-red-color" i18n>
              No compatible flavors found for selected boot source!
            </span>
          <mat-select formControlName="flavor" placeholder="Select a configuration" class="flavor-mat-select"
                      [class.flavor-mat-select-limit]="!!this.selectedFlavor">
            <mat-option *ngFor="let flavor of createOptions.flavor" [value]="flavor.id" class="flavor-select-option"
                        [disabled]="(selectedBootSource && selectedBootSource.object && bootSourceIsImage() &&
                          ((selectedBootSource.object.min_disk > flavor.root_gb && flavor.root_gb > 0) ||
                          selectedBootSource.object.min_ram > flavor.memory_mb)) || flavor.out_of_stock">
              <span class="fl-bold">{{ flavor.name }} </span>
              <br>
              <span class="mat-caption">{{ flavor.memory_gb }} GB RAM {{ flavor.vcpus }} vCPUs</span>
              <br>
              <span *ngIf="(selectedBootSource && selectedBootSource.object && bootSourceIsImage() &&
                            ((selectedBootSource.object.min_disk > flavor.root_gb && flavor.root_gb > 0) ||
                            selectedBootSource.object.min_ram > flavor.memory_mb)) && !flavor.out_of_stock"
                    class="mat-error mat-caption incompatible-flavor-txt" i18n>
                  Incompatible with selected boot source
                </span>
              <span *ngIf="flavor.out_of_stock" class="mat-error mat-caption incompatible-flavor-txt" i18n>
                  Flavor is out of stock
                </span>
            </mat-option>
          </mat-select>
          <div *ngIf="selectedFlavor" class="fl-ellipsis-text sel-flavor-details-wrapper">
            <span class="fl-bold">{{ selectedFlavor.name }}</span><br>
            <span class="flavor-details-sub-text" i18n>{{ selectedFlavor.memory_gb }} GB memory</span><br>
            <span class="flavor-details-sub-text" i18n>{{ selectedFlavor.vcpus }} virtual CPUs</span>
          </div>
          <mat-error *ngIf="instanceForm.controls.flavor.touched || clickedSave">
            {{ fieldErrors['flavor'] }}
          </mat-error>
        </div>
      </div>
    </div>
    <div layoutDirection="row" *ngIf="config && config.current && config.current.settings.instanceForm.showUserData">
      <div layoutDirection="column" appFlex="100">
        <mat-checkbox [color]="'primary'" (change)="switchUserData()" i18n>Cloud-init user data</mat-checkbox>
      </div>
    </div>
    <div layoutDirection="row" *ngIf="showUserData">
      <div layoutDirection="column" appFlex="100">
        <mat-form-field appFlex="100">
          <mat-label i18n>Cloud-init user data</mat-label>
          <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                    class="fl-userdata-textarea" matInput rows="3" formControlName="user_data"></textarea>
        </mat-form-field>
      </div>
    </div>
    <div layoutDirection="row" layoutDirection-lt-md="column" class="fl-margin-top-medium" appLayoutGap="5px">
      <div layoutDirection="column" appFlex="33%" ltMdFlex="100">
        <mat-form-field>
          <mat-label i18n>Network selection</mat-label>
          <mat-select #nicsSelect formControlName="nics" i18n-placeholder placeholder="Network selection"
                      required multiple>
            <ng-container *ngIf="createOptions.nics.length > 1">
              <mat-option *ngFor="let network of createOptions.nics" [value]="network.id">{{ network.name }}
              </mat-option>
            </ng-container>
            <ng-container *ngIf="createOptions.nics.length < 2">
              <mat-option *ngFor="let network of createOptions.nics" [value]="network.id" (click)="closeNicsSelect()">
                {{ network.name }}
              </mat-option>
            </ng-container>
          </mat-select>
          <mat-error>{{ fieldErrors['nics'] }}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="column" appFlex="33%" ltMdFlex="100">
        <mat-form-field>
          <mat-label i18n>SSH keys</mat-label>
          <mat-select formControlName="ssh_keys" i18n-placeholder placeholder="SSH keys" multiple>
            <mat-option class="add-key-option" (click)="addSSHKey()" i18n>Add SSH key ...</mat-option>
            <ng-container *ngIf="createOptions.ssh_key.length">
              <mat-option *ngFor="let sshKey of createOptions.ssh_key" [value]="sshKey.id">
                {{ sshKey.name }}
              </mat-option>
            </ng-container>
            <ng-container *ngIf="createOptions.ssh_key.length === 0">
              <mat-option disabled i18n>
                No key to choose from
              </mat-option>
            </ng-container>
          </mat-select>
          <mat-hint *ngIf="sshKeysHint">{{ sshKeysHint }}</mat-hint>
          <mat-error>{{ fieldErrors['ssh_keys'] }}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="column" appFlex="33%" ltMdFlex="100"
           *ngIf="!bootSourceIsWindows() && config && config.current && config.current.settings && showPasswordInput &&
           config.current.settings.instanceForm && config.current.settings.instanceForm.showRootPasswordField">
        <!-- TODO: if boot source is windows, show message that pass will be set on first boot -->
        <div layoutDirection="row">
          <mat-form-field class="full-width fl-margin-bottom" subscriptSizing="dynamic">
            <mat-label>{{ passwordLabel }}</mat-label>
            <input matInput [placeholder]="passwordLabel"
                   [type]="showPasswordText ? 'text' : ((passwordControl.value.length > 0) ? 'password' : 'text')"
                   formControlName="root_password" maxlength="1024" autocomplete="new-password"
                   [required]="config.current.settings.instanceForm.rootPasswordFieldMandatory">
            <mat-hint *ngIf="passwordHint">{{ passwordHint }}</mat-hint>
            <mat-error>{{ fieldErrors['root_password'] }}</mat-error>
            <a mat-icon-button matSuffix
               (mousedown)="$event.preventDefault();showPasswordText = true"
               (mouseup)="$event.preventDefault();showPasswordText = false"
               [attr.fl-tooltip]="holdButtonText"
               [attr.aria-pressed]="showPasswordText">
              <mat-icon>{{ showPasswordText ? 'visibility_off' : 'visibility' }}</mat-icon>
            </a>
          </mat-form-field>
        </div>
      </div>
    </div>
    <div *ngIf="instanceForm.contains('assign_floating_ip') && canAssignFloatingIp && floatingIpNetworks.length"
         layoutDirection="column">
      <div layoutDirection="row">
        <mat-checkbox class="fl-margin-bottom-medium"
                      color="primary"
                      formControlName="assign_floating_ip" i18n>
          Assign floating IP
        </mat-checkbox>
        <app-icon [icon]="assignFloatingIPInfoIcon"></app-icon>
      </div>
      <mat-form-field *ngIf="instanceForm.contains('floating_ip_network')" appFlex="50">
        <mat-label i18n>Floating IP network</mat-label>
        <mat-select formControlName="floating_ip_network" placeholder="Floating IP network" i18n-placeholder>
          <mat-option *ngFor="let nic of floatingIpNetworks" [value]="nic.id">
            {{ nic.name }}
          </mat-option>
        </mat-select>
        <mat-error> {{ instanceForm.controls.floating_ip_network.errors | errorFormatter }}</mat-error>
      </mat-form-field>
    </div>
    <div layoutDirection="column">
      <div layoutDirection="row" appLayoutGap="{{instanceForm.contains('availability_zone') ? '5px' : null}}">
        <mat-form-field *ngIf="instanceForm.contains('availability_zone')" appFlex="100">
          <mat-label i18n>Availability zone</mat-label>
          <mat-select formControlName="availability_zone"
                      i18n-placeholder placeholder="Availability zone">
            <ng-container>
              <mat-option *ngFor="let az of createOptions.availability_zones" [value]="az">
                {{ az }}
              </mat-option>
            </ng-container>
          </mat-select>
        </mat-form-field>
        <mat-form-field *ngIf="instanceForm.contains('number_of_instances')" appFlex="100">
          <mat-label i18n>Number of instances to create</mat-label>
          <input matInput placeholder="Number of instances to create" i18n-placeholder type="number"
                 formControlName="number_of_instances"
                 min="1" step="1" max="100">
          <mat-error>{{ fieldErrors['number_of_instances'] }}</mat-error>
        </mat-form-field>
      </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>
