<div class="fl-content fl-content-min-height" layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
  <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
        [formGroup]="heatStackForm" layoutDirection="column" appFlex="60" xsFlex="100%">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="heatStackForm"></app-form-errors>
    <app-credit-warning *ngIf="!object?.id" resourceName="heat-stack" i18n-resourceName></app-credit-warning>
    <ng-container *ngIf="step === 'validate-template'">
      <mat-form-field>
        <mat-label i18n>Template source</mat-label>
        <mat-select formControlName="template_source" placeholder="Template source" i18n-placeholder required>
          <mat-option value="file" i18n>File</mat-option>
          <mat-option value="direct-input" i18n>Direct input</mat-option>
          <mat-option value="url" i18n>URL</mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field *ngIf="heatStackForm.controls.template_source.value === 'file'">
        <input type="file" class="fl-ellipsis-text" (change)="templateFileChanged($event)">
        <input matInput type="text" formControlName="template_file" class="hide">
        <mat-error>{{ fieldErrors['template_file'] }}</mat-error>
      </mat-form-field>

      <mat-form-field *ngIf="heatStackForm.controls.template_source.value === 'direct-input'">
        <mat-label i18n>Template data</mat-label>
        <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                  matInput rows="10" placeholder="Template data" i18n-placeholder type="text"
                  formControlName="template_data">
          </textarea>
        <mat-error>{{ fieldErrors['template_data'] }}</mat-error>
      </mat-form-field>

      <mat-form-field *ngIf="heatStackForm.controls.template_source.value === 'url'">
        <mat-label i18n>Template URL</mat-label>
        <input matInput formControlName="template_url" placeholder="Template URL" i18n-placeholder type="text">
        <mat-error>{{ fieldErrors['template_url'] }}</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label i18n>Environment source</mat-label>
        <mat-select formControlName="environment_source" placeholder="Environment source" i18n-placeholder>
          <mat-option value="file" i18n>File</mat-option>
          <mat-option value="direct-input" i18n>Direct input</mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field *ngIf="heatStackForm.controls.environment_source.value === 'file'">
        <input type="file" class="fl-ellipsis-text" (change)="environmentFileChanged($event)">
        <input matInput type="text" formControlName="environment_file" class="hide">
        <mat-error>{{ fieldErrors['environment_file'] }}</mat-error>
      </mat-form-field>

      <mat-form-field *ngIf="heatStackForm.controls.environment_source.value === 'direct-input'">
        <mat-label i18n>Environment data</mat-label>
        <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                  matInput rows="10" placeholder="Environment data" i18n-placeholder type="text"
                  formControlName="environment_data">
          </textarea>
        <mat-error>{{ fieldErrors['environment_data'] }}</mat-error>
      </mat-form-field>

    </ng-container>
    <ng-container *ngIf="step === 'finalize'">
      <mat-form-field>
        <mat-label i18n>Stack name</mat-label>
        <input matInput type="text" formControlName="stack_name" placeholder="Stack name" i18n-placeholder required>
        <mat-error>{{ fieldErrors['stack_name'] }}</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label i18n>Creation timeout(minutes)</mat-label>
        <input matInput type="number" formControlName="creation_timeout" placeholder="Creation timeout(minutes)"
               i18n-placeholder min="0" required>
        <mat-error>{{ fieldErrors['stack_name'] }}</mat-error>
      </mat-form-field>

      <mat-checkbox formControlName="rollback_on_failure" i18n>
        Rollback On Failure
      </mat-checkbox>

      <div *ngIf="parameterNames.length > 0" [formGroup]="parametersGroup" layoutDirection="column"
           class="fl-margin-top">
        <ng-container *ngFor="let paramGroup of parameterGroups">
          <h2 class="fl-heading-md fl-margin-top" *ngIf="paramGroup.label">{{ paramGroup.label }}</h2>
          <ng-container *ngFor="let paramName of paramGroup.parameters"
                        [ngSwitch]="validationResults.Parameters[paramName].Type">
            <mat-checkbox *ngSwitchCase="'Boolean'" [formControlName]="paramName">
              {{ validationResults.Parameters[paramName].Label }}
            </mat-checkbox>
            <mat-form-field *ngSwitchDefault class="fl-margin-bottom-small">
              <ng-container [ngSwitch]="validationResults.Parameters[paramName].CustomConstraint">
                <mat-select *ngSwitchCase="'nova.keypair'" [formControlName]="paramName">
                  <mat-option *ngFor="let keypair of validationResults.keypairs" [value]="keypair">
                    {{ keypair }}
                  </mat-option>
                </mat-select>
                <input *ngSwitchDefault matInput type="text" [formControlName]="paramName">
              </ng-container>
              <mat-label>{{ validationResults.Parameters[paramName].Label }}</mat-label>
              <mat-hint>{{ validationResults.Parameters[paramName].Description }}</mat-hint>
            </mat-form-field>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
  </form>
  <div appFlex="40" class="hide-xs">
    <ng-container *ngIf="step === 'validate-template'">
      <h2 class="fl-detail" i18n>Description</h2>
      <p class="fl-detail" i18n>
        A template is used to automate the deployment of infrastructure, services, and applications.
        Use one of the available template source options to specify the template to be used in creating this stack.
      </p>
    </ng-container>
    <ng-container *ngIf="step === 'finalize'">
      <h2 class="fl-detail" i18n>Description</h2>
      <p class="fl-detail" i18n>
        Create a new stack with the provided values.
      </p>
    </ng-container>
  </div>
</div>
