<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="createClusterTemplateForm" layoutDirection="column" *ngIf="createOptions" class="fl-content">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="createClusterTemplateForm"></app-form-errors>
  <app-credit-warning *ngIf="!object?.id" resourceName="cluster template" i18n-resourceName></app-credit-warning>
  <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 template in admin project
    </mat-radio-button>
    <mat-radio-button [color]="'primary'" [value]="true" class="fl-margin-bottom-medium" i18n>
      Create cluster template in client's project
    </mat-radio-button>
  </mat-radio-group>

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

  <div layoutDirection="row" appLayoutGap="10px" layoutDirection-lt-md="column">
    <mat-form-field appFlex="100">
      <mat-label i18n>Cluster template name</mat-label>
      <input matInput placeholder="Cluster template name" i18n-placeholder type="text" autocomplete="off"
             formControlName="name" required>
      <mat-error>{{fieldErrors['name']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="100">
      <mat-label i18n>COE</mat-label>
      <mat-select formControlName="coe" placeholder="COE" i18n-placeholder required>
        <mat-option *ngFor="let item of createOptions.coe | keyvalue"
                    [value]="item.key">
          {{item.value}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['coe']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="100">
      <mat-label i18n>Server type</mat-label>
      <mat-select formControlName="server_type" placeholder="Server type" i18n-placeholder required>
        <mat-option value="vm" i18n>
          Virtual machine
        </mat-option>
        <mat-option value="baremetal" i18n>
          Baremetal
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['server_type']}}</mat-error>
    </mat-form-field>
  </div>
  <div layoutDirection="row" layoutDirection-lt-sm="column" appLayoutGap="30px" xsGap="0">
    <mat-checkbox formControlName="public" [color]="'primary'" *ngIf="publicCheckbox" i18n>Public</mat-checkbox>
    <mat-checkbox formControlName="registry_enabled" [color]="'primary'" i18n>
      Enable registry
    </mat-checkbox>
    <mat-checkbox formControlName="tls_disabled" [color]="'primary'" i18n>
      Disable TLS
    </mat-checkbox>
  </div>
  <div layoutDirection="row" layoutDirection-lt-sm="column" appLayoutGap="30px" xsGap="0">
    <mat-checkbox formControlName="hide_discovery_url"
                  [color]="'primary'" i18n>Hide discovery URL input</mat-checkbox>
    <mat-checkbox formControlName="hide_timeout_input" [color]="'primary'" i18n>Hide timeout input box</mat-checkbox>
    <mat-checkbox formControlName="make_labels_immutable" [color]="'primary'" i18n>Make labels immutable</mat-checkbox>
  </div>
  <h2 class="fl-heading-md fl-margin-top fl-margin-bottom-medium" i18n>Node spec</h2>
  <mat-form-field appFlex="100">
    <mat-label i18n>Region</mat-label>
    <mat-select formControlName="region" placeholder="Region" i18n-placeholder
                (selectionChange)="changedRegion()" 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 layoutDirection="row" appLayoutGap="10px">
    <mat-form-field appFlex="50">
      <mat-label i18n>Image</mat-label>
      <mat-select formControlName="image_id" placeholder="Image" i18n-placeholder required>
        <mat-option *ngFor="let image of createOptions[createClusterTemplateForm.controls.coe.value + '_images']"
                    [value]="image.id">
          {{image.name || image.id}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['image_id']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="50">
      <mat-label i18n>Keypair</mat-label>
      <mat-select formControlName="keypair_id" placeholder="Keypair" i18n-placeholder>
        <mat-option value="null" i18n>None</mat-option>
        <mat-option *ngFor="let keypair of createOptions.keypairs"
                    [value]="keypair.name">
          {{keypair.name}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['keypair_id']}}</mat-error>
    </mat-form-field>
  </div>
  <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="row" appLayoutGap="10px" layoutDirection-lt-md="column">
    <mat-form-field appFlex="100">
      <mat-label i18n>Volume driver</mat-label>
      <mat-select formControlName="volume_driver" placeholder="Volume driver" i18n-placeholder required>
        <ng-container *ngIf="createClusterTemplateForm.controls.coe.value === 'kubernetes'">
          <mat-option value="cinder" i18n>
            Cinder
          </mat-option>
        </ng-container>
        <ng-container *ngIf="createClusterTemplateForm.controls.coe.value !== 'kubernetes'">
          <mat-option value="rexray" i18n>
            Rexray
          </mat-option>
        </ng-container>
      </mat-select>
      <mat-error>{{fieldErrors['volume_driver']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="100">
      <mat-label i18n>Docker storage driver</mat-label>
      <mat-select formControlName="docker_storage_driver"
                  (selectionChange)="changedDockerStorageDriver()"
                  placeholder="Docker storage driver" i18n-placeholder required>
        <mat-option *ngFor="let item of createOptions.docker_storage_driver_opts | keyvalue"
                    [value]="item.key">
          {{item.value}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['docker_storage_driver']}}</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" step="1"
             [min]="dockerVolumeSizeMin"
             [required]="dockerVolumeSizeRequired">
      <mat-error>{{fieldErrors['docker_volume_size']}}</mat-error>
    </mat-form-field>
  </div>
  <mat-form-field appFlex="100">
    <mat-label i18n>Insecure registry</mat-label>
    <input matInput placeholder="Insecure registry" i18n-placeholder type="text"
           formControlName="insecure_registry">
    <mat-error>{{fieldErrors['insecure_registry']}}</mat-error>
  </mat-form-field>
  <h2 class="fl-heading-md fl-margin-top fl-margin-bottom-medium" i18n>Network</h2>
  <div layoutDirection="row" appLayoutGap="10px" layoutDirection-lt-md="column">
    <mat-form-field appFlex="100">
      <mat-label i18n>Network driver</mat-label>
      <mat-select formControlName="network_driver" placeholder="Network driver" i18n-placeholder required>
        <mat-option *ngFor="let option of createOptions.network_driver_opts[createClusterTemplateForm.controls.coe.value]"
                    [value]="option">
          {{option}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['network_driver']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="100">
      <mat-label i18n>External network</mat-label>
      <mat-select formControlName="external_network_id" placeholder="External network" i18n-placeholder required>
        <mat-option *ngFor="let network of createOptions.external_networks"
                    [value]="network.id">
          {{network.name}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['external_network_id']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="100">
      <mat-label i18n>Fixed network</mat-label>
      <mat-select formControlName="fixed_network" placeholder="Fixed network" i18n-placeholder>
        <mat-option [value]="null" i18n>None</mat-option>
        <mat-option *ngFor="let network of createOptions.private_networks"
                    [value]="network.id">
          {{network.name}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['fixed_network']}}</mat-error>
    </mat-form-field>
  </div>

  <app-autocomplete [control]="fixed_subnet"
                    [placeholderUnselected]="subnetUnselectedPlaceholder"
                    [placeholderSelected]="subnetSelectedPlaceholder"
                    [switchMapHandler]="subnetOptionsSwitchMap"></app-autocomplete>

  <mat-form-field appFlex="100">
    <mat-label i18n>HTTPS proxy</mat-label>
    <input matInput placeholder="HTTPS proxy" i18n-placeholder type="text"
           formControlName="http_proxy">
    <mat-error>{{fieldErrors['http_proxy']}}</mat-error>
  </mat-form-field>
  <mat-form-field appFlex="100">
    <mat-label i18n>HTTP proxy</mat-label>
    <input matInput placeholder="HTTP proxy" i18n-placeholder type="text"
           formControlName="https_proxy">
    <mat-error>{{fieldErrors['https_proxy']}}</mat-error>
  </mat-form-field>
  <mat-form-field appFlex="100">
    <mat-label i18n>No proxy</mat-label>
    <input matInput placeholder="No proxy" i18n-placeholder type="text"
           formControlName="no_proxy">
    <mat-error>{{fieldErrors['no_proxy']}}</mat-error>
  </mat-form-field>
  <mat-form-field appFlex="100">
    <mat-label i18n>DNS</mat-label>
    <input matInput placeholder="DNS" i18n-placeholder type="text"
           formControlName="dns_nameserver">
    <mat-error>{{fieldErrors['dns_nameserver']}}</mat-error>
  </mat-form-field>
  <div layoutDirection="row" appLayoutGap="30px">
    <mat-checkbox formControlName="master_lb_enabled" [color]="'primary'" i18n>Master LB</mat-checkbox>
    <mat-checkbox formControlName="floating_ip_enabled" [color]="'primary'" i18n>
      Floating IP
    </mat-checkbox>
    <mat-checkbox formControlName="hidden" [color]="'primary'" *ngIf="hiddenCheckbox" i18n>
      Hidden
    </mat-checkbox>
  </div>
  <div class="fl-heading-md fl-margin-top fl-margin-bottom-medium" 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>
</form>
