<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)" [formGroup]="createClusterForm"
      class="fl-content">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="createClusterForm"></app-form-errors>
  <app-credit-warning resourceName="cluster" i18n-resourceName></app-credit-warning>
  <div layoutDirection="column">
    <mat-radio-group *ngIf="!object.id && clientSelection" layoutDirection="column" (ngModelChange)="changeDestination($event)"
      [(ngModel)]="createInClientProject" [ngModelOptions]="{standalone: true}">
      <mat-radio-button [color]="'primary'" [value]="false" i18n>
        Create cluster in admin project
      </mat-radio-button>
      <mat-radio-button [color]="'primary'" [value]="true" class="fl-margin-bottom-medium" i18n>
        Create cluster in client's project
      </mat-radio-button>
    </mat-radio-group>

    <ng-container *ngIf="!object.id && clientSelection && createInClientProject">
      <app-client-autocomplete [control]="createClusterForm.controls.client" clientsWithEnabledProject></app-client-autocomplete>
    </ng-container>

    <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-checkbox formControlName="auto_generate_os_api_user" color="primary" i18n>
      Auto generate OpenStack API user
    </mat-checkbox>
    <mat-form-field *ngIf="chooseApiUser">
      <mat-label i18n>OpenStack API user</mat-label>
      <mat-select placeholder="OpenStack API user" i18n-placeholder formControlName="os_api_user_id" required>
        <mat-option *ngFor="let user of apiUsers" [value]="user.id">
          {{user.name}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['os_api_user_id'] }}</mat-error>
    </mat-form-field>
    <mat-form-field *ngIf="chooseApiUser">
      <mat-label i18n>OpenStack API user password</mat-label>
      <input matInput placeholder="OpenStack API user password" i18n-placeholder
             type="password" autocomplete="new-password"
             formControlName="os_api_user_password" required>
      <mat-error>{{fieldErrors['os_api_user_password']}}</mat-error>
    </mat-form-field>

    <app-autocomplete [control]="createClusterForm.controls.cluster_template"
                      [optionsService]="clusterTemplatesApiService"
                      [placeholderUnselected]="clusterTemplateUnselectedPlaceholder"
                      [placeholderSelected]="clusterTemplateSelectedPlaceholder"></app-autocomplete>

    <span *ngIf="createClusterForm.controls.cluster_template.value &&
    !createClusterForm.controls.cluster_template.value.id" class="fl-red-color" i18n>
      Please select a valid value.
    </span>

    <div *ngIf="clusterTemplate.value && clusterTemplate.value.id" layoutDirection="column">
      <div class="fl-heading-md fl-margin-bottom-small" i18n>Size</div>
      <div layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
        <mat-form-field appFlex="100">
          <mat-label i18n>Master count</mat-label>
          <input matInput placeholder="Master count" i18n-placeholder type="number"
                 formControlName="master_count" min="1" step="1" required>
          <mat-error>{{fieldErrors['master_count']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="100">
          <mat-label i18n>Node count</mat-label>
          <input matInput placeholder="Node count" i18n-placeholder type="number"
                 formControlName="node_count" min="1" step="1" required>
          <mat-error>{{fieldErrors['node_count']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="100">
          <mat-label i18n>Docker volume size (GB)</mat-label>
          <input matInput placeholder="Docker volume size (GB)" i18n-placeholder type="number"
                 formControlName="docker_volume_size" [min]="dockerVolumeSizeMin" step="1"
                 [required]="dockerVolumeSizeRequired">
          <mat-error>{{fieldErrors['docker_volume_size']}}</mat-error>
        </mat-form-field>
      </div>
      <div class="fl-heading-md fl-margin-bottom-small" i18n>Misc</div>
      <div layoutDirection="row">
        <mat-form-field appFlex="50" *ngIf="createClusterForm.contains('discovery_url')">
          <mat-label i18n>Discovery URL</mat-label>
          <input matInput placeholder="Discovery URL" type="text" i18n-placeholder formControlName="discovery_url">
          <mat-error>{{fieldErrors['discovery_url']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50" *ngIf="createClusterForm.contains('create_timeout')" class="offset-10px">
          <mat-label i18n>Timeout (seconds)</mat-label>
          <input matInput placeholder="Timeout (seconds)" i18n-placeholder type="number"
                 formControlName="create_timeout" min="0" step="1" required>
          <mat-error>{{fieldErrors['create_timeout']}}</mat-error>
        </mat-form-field>
      </div>
      <mat-form-field appFlex="100">
        <mat-label i18n>Select keypair</mat-label>
        <mat-select formControlName="keypair" placeholder="Select keypair" i18n-placeholder required>
          <mat-option *ngFor="let keypair of createOptions.keypairs" [value]="keypair.id">
            {{keypair.name}}
          </mat-option>
        </mat-select>
        <mat-error>{{fieldErrors['keypair']}}</mat-error>
      </mat-form-field>
      <div layoutDirection="row" appLayoutGap="10px">
        <mat-form-field appFlex="50">
          <mat-label i18n>Node flavor</mat-label>
          <mat-select formControlName="flavor_id" placeholder="Node flavor" i18n-placeholder required>
            <mat-option *ngFor="let flavor of createOptions.flavors" [value]="flavor.id">
              {{flavor.name}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['flavor_id']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Master node flavor</mat-label>
          <mat-select formControlName="master_flavor_id" placeholder="Master node flavor" i18n-placeholder required>
            <mat-option *ngFor="let flavor of createOptions.flavors" [value]="flavor.id">
              {{flavor.name}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['master_flavor_id']}}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="column"
           [class.fl-margin-bottom]="!createOptions.master_lb_flag">
        <mat-checkbox formControlName="floating_ip_enabled" color="primary">
          <span i18n>Floating IP enabled</span>
          <app-icon [icon]="{
            'name': 'info',
            'verticalAlign': 'middle',
            'marginLeft': '10px',
            'tooltip': floatingIpEnabledTooltip
          }">
          </app-icon>
        </mat-checkbox>
        <mat-checkbox *ngIf="createOptions.master_lb_flag"
                      formControlName="master_lb_enabled" color="primary" i18n>Master LB</mat-checkbox>
      </div>
      <div>
        <mat-checkbox *ngIf="createOptions.master_lb_flag" [class.fl-margin-bottom]="createOptions.master_lb_flag"
                      [disabled]="!createClusterForm.controls.master_lb_enabled?.value ||
                      createClusterForm.controls.floating_ip_enabled.value"
                      formControlName="master_lb_floating_ip_enabled" color="primary">
          <span i18n>Use Floating IP for Load Balancers</span>
          <mat-icon class="vertical-align-middle fl-margin-left-small"
                    [attr.fl-tooltip]="masterLBFloatingIpEnabledTooltip">info</mat-icon>
        </mat-checkbox>
      </div>
      <div class="fl-heading-md fl-margin-bottom-small" i18n>Labels</div>
      <mat-form-field>
        <mat-label i18n>Labels</mat-label>
        <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                  rows="5" placeholder="KEY1=VALUE1, KEY2=VALUE2" matInput formControlName="labels"></textarea>
      </mat-form-field>
    </div>
  </div>
</form>

<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>
