<h1>Create low precision model</h1>
<mat-horizontal-stepper #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <p class="required">
      * - required field
    </p>
    <h2>Model</h2>
    <mat-card>
      <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>Basic parameters</ng-template>

        <mat-form-field class="form-field long" appearance="fill">
          <mat-label>model</mat-label>
          <input required formControlName="modelLocation" matInput>
        </mat-form-field>
        <button mat-raised-button color="primary" class="browse" (click)="openDialog('modelLocation', 'models')">
          <img class="icon" src="./../../assets/145b-document-outlined-white.svg">
          Choose file
        </button>
        <br>
        <div class="spinner-wrapper">
          <mat-form-field class="form-field" appearance="fill">
            <mat-label>model domain</mat-label>
            <mat-select formControlName="modelDomain" required>
              <mat-option *ngFor="let domain of domains" [value]="domain.name" matTooltipPosition="right"
                [matTooltip]="domain.help">
                <ng-container *ngIf="domain.name === 'nlp'">NLP</ng-container>
                <ng-container *ngIf="domain.name !== 'nlp'">{{ domain.name | modelList | titlecase }}</ng-container>
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-spinner class="spinner" *ngIf="showSpinner" [diameter]="25"></mat-spinner>
        </div>

        <div class="spinner-wrapper">
          <mat-form-field class="form-field" appearance="fill">
            <mat-label>framework</mat-label>
            <mat-select formControlName="framework" required>
              <mat-option *ngFor="let framework of frameworks" [value]="framework.name" matTooltipPosition="right"
                [matTooltip]="framework.help">
                {{ framework.name }}
              </mat-option>
            </mat-select>
          </mat-form-field>

          <a *ngIf="frameworkVersion" class="version">
            version: {{ frameworkVersion }}
          </a>
          <a *ngIf="frameworkWarning" class="warning">
            <img class="warning-icon" src="./../../assets/006a-alert-solid-red.svg">
            {{ frameworkWarning }}
          </a>
          <mat-spinner class="spinner" *ngIf="showSpinner" [diameter]="25"></mat-spinner>
        </div>

        <div *ngIf="inputs && outputs" class="spinner-wrapper">
          <ng-container *ngIf="inputs.length">
            <mat-form-field class="form-field" appearance="fill">
              <mat-label>input *</mat-label>
              <mat-select formControlName="input" multiple>
                <mat-option *ngFor="let input of inputs" [value]="input"
                  [disabled]="order['input'][0] === 'custom' && input !== 'custom'"
                  (onSelectionChange)="boundaryNodesChanged($event.source.value, 'input')">
                  {{ input }}
                  {{ inputs.length > 1 && order['input'].indexOf(input) !== -1 && input !== 'custom' ?
                  '(' + (order['input'].indexOf(input) + 1) + ')' : null }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </ng-container>
          <ng-container *ngIf="!inputs.length">
            <mat-form-field class="form-field" appearance="fill">
              <mat-label>input *</mat-label>
              <input formControlName="input" matInput>
            </mat-form-field>
            <a *ngIf="!showSpinner && firstFormGroup.get('modelLocation').value" class="version">
              No inputs found for this model.
            </a>
          </ng-container>
          <ng-container *ngIf="outputs.length">
            <mat-form-field class="form-field" appearance="fill">
              <mat-label>output *</mat-label>
              <mat-select formControlName="output" multiple>
                <mat-option *ngFor="let output of outputs" [value]="output"
                  [disabled]="order['output'][0] === 'custom' && output !== 'custom'"
                  (onSelectionChange)="boundaryNodesChanged($event.source.value, 'output')">
                  {{ output }}
                  {{ outputs.length > 1 && order['output'].indexOf(output) !== -1 && output !== 'custom' ?
                  '(' + (order['output'].indexOf(output) + 1) + ')' : null }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <ng-container
              *ngIf="firstFormGroup.get('output').value.length === 1 && firstFormGroup.get('output').value[0] === 'custom'">
              <mat-form-field class="form-field" appearance="fill">
                <mat-label>output *</mat-label>
                <input formControlName="outputOther" matInput>
              </mat-form-field>
            </ng-container>
          </ng-container>
          <ng-container *ngIf="!outputs.length">
            <mat-form-field class="form-field" appearance="fill">
              <mat-label>output *</mat-label>
              <input formControlName="output" matInput>
            </mat-form-field>
            <a *ngIf="!showSpinner && firstFormGroup.get('modelLocation').value" class="version">
              No outputs found for this model.
            </a>
          </ng-container>
          <mat-spinner class="spinner" *ngIf="showSpinner" [diameter]="25"></mat-spinner>
        </div>
        <a *ngIf="inputs && outputs" class="info">
          Order of the inputs and outputs matters.
        </a>
      </form>
    </mat-card>

    <form [formGroup]="secondFormGroup">
      <h2>Dataset
        <a href="https://github.com/intel/lpot/blob/master/docs/dataset.md" target="_blank">
          <img class="help-icon" src="./../../assets/005a-help-solid.svg" matTooltip="Click to open documentation">
        </a>
      </h2>
      <mat-card>
        <h3>Calibration</h3>
        <mat-card>
          <span class="inline">
            <mat-form-field class="form-field" appearance="fill">
              <mat-label>provided dataset</mat-label>
              <mat-select formControlName="dataLoaderQuantization"
                (selectionChange)="setDefaultDataLoaderParam($event, 'quantization')">
                <mat-option *ngFor="let dataLoader of dataLoaders" [value]="dataLoader.name" matTooltipPosition="right"
                  [matTooltip]="dataLoader.help">
                  {{ dataLoader.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </span>
          <span class="inline">
            <ng-container *ngFor="let param of dataLoaderParams['quantization']">
              <ng-container *ngIf="param.name !== 'root'">
                <mat-form-field class="form-field" appearance="fill">
                  <mat-label>{{ param.name }}</mat-label>
                  <input [(ngModel)]="param.value" matInput [ngModelOptions]="{standalone: true}"
                    matTooltipPosition="right" [matTooltip]="param.help">
                </mat-form-field>
              </ng-container>
            </ng-container>
          </span>
          <span *ngIf="showDatasetLocation['quantization']" class="inline">
            <mat-form-field class="form-field long" appearance="fill">
              <mat-label>dataset location *</mat-label>
              <input formControlName="datasetLocationQuantization" matInput (change)="useForEvaluation()">
            </mat-form-field>
            <button mat-raised-button color="primary" class="browse"
              (click)="openDialog('datasetLocationQuantization', 'datasets')">
              <img class="icon" src="./../../assets/050a-folder-solid-white.svg">
              Choose dataset
            </button>
          </span>
          <a *ngIf="secondFormGroup.get('dataLoaderQuantization').value === 'custom'" class="custom">
            Fill the code template before tuning
          </a>
          <br>
          <a class="info">
            Default calibration sample size: 100
          </a>
        </mat-card>
        <h3>Evaluation</h3>
        <mat-checkbox [checked]="true" (change)="calibrationDataChange($event.checked)">Use the same data as calibration
        </mat-checkbox>

        <mat-card *ngIf="!useCalibrationData">
          <span class="inline">
            <mat-form-field class="form-field" appearance="fill">
              <mat-label>provided dataset</mat-label>
              <mat-select formControlName="dataLoaderEvaluation"
                (selectionChange)="setDefaultDataLoaderParam($event, 'evaluation')">
                <mat-option *ngFor="let dataLoader of dataLoaders" [value]="dataLoader.name" matTooltipPosition="right"
                  [matTooltip]="dataLoader.help">
                  {{ dataLoader.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </span>
          <span class="inline">
            <ng-container *ngFor="let param of dataLoaderParams['evaluation']">
              <ng-container *ngIf="param.name !== 'root'">
                <mat-form-field class="form-field" appearance="fill">
                  <mat-label>{{ param.name }}</mat-label>
                  <input [(ngModel)]="param.value" matInput [ngModelOptions]="{standalone: true}"
                    matTooltipPosition="right" [matTooltip]="param.help">
                </mat-form-field>
              </ng-container>
            </ng-container>
          </span>
          <span *ngIf="showDatasetLocation['evaluation']" class="inline">
            <mat-form-field class="form-field long" appearance="fill">
              <mat-label>dataset location *</mat-label>
              <input formControlName="datasetLocationEvaluation" matInput>
            </mat-form-field>
            <button mat-raised-button color="primary" class="browse"
              (click)="openDialog('datasetLocationEvaluation', 'datasets')">
              <img class="icon" src="./../../assets/050a-folder-solid-white.svg">
              Choose dataset
            </button>
          </span>
          <a *ngIf="secondFormGroup.get('dataLoaderEvaluation').value === 'custom'" class="custom">
            Fill the code template before tuning
          </a>
        </mat-card>
        <ng-container
          *ngIf="secondFormGroup.get('dataLoaderQuantization').value !== 'custom' && secondFormGroup.get('dataLoaderEvaluation').value !== 'custom'">
          <h3>Transforms
            <a href="https://github.com/intel/lpot/blob/master/docs/transform.md" target="_blank">
              <img class="help-icon" src="./../../assets/005a-help-solid.svg" matTooltip="Click to open documentation">
            </a>
          </h3>
          <mat-card>
            <ng-container *ngFor="let transformItem of transformationParams; let index = index; let last = last">
              <mat-card>
                <span class="inline">
                  <mat-form-field class="form-field" appearance="fill">
                    <mat-label>transform {{ index }}</mat-label>
                    <mat-select [(ngModel)]="transformItem['name']" [ngModelOptions]="{standalone: true}"
                      (selectionChange)="setDefaultTransformationParam($event, index)">
                      <mat-option *ngFor="let transformation of transformations" [value]="transformation.name"
                        matTooltipPosition="right" [matTooltip]="transformation.help">
                        {{ transformation.name }}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                  <ng-container *ngIf="isArray(transformItem['params'])">
                    <ng-container *ngFor="let param of transformItem['params']">
                      <mat-form-field class="form-field" appearance="fill">
                        <mat-label>{{ param.name }}</mat-label>
                        <input [(ngModel)]="param.value" matInput [ngModelOptions]="{standalone: true}"
                          matTooltipPosition="right" [matTooltip]="param.help">
                      </mat-form-field>
                    </ng-container>
                  </ng-container>
                  <button mat-icon-button color="warn" class="browse" (click)="removeTransformation(index)"
                    matTooltip="Remove this transformation">
                    &#x2573;
                  </button>
                  <button *ngIf="last" mat-raised-button color="primary" class="browse"
                    (click)="addNewTransformation()">
                    &#65291; Add new transformation
                  </button>
                </span>
              </mat-card>
            </ng-container>
            <br>
          </mat-card>
        </ng-container>
      </mat-card>
      <h2>Metric
        <a href="https://github.com/intel/lpot/blob/master/docs/metrics.md" target="_blank">
          <img class="help-icon" src="./../../assets/005a-help-solid.svg" matTooltip="Click to open documentation">
        </a>
      </h2>
      <mat-card>
        <mat-form-field class="form-field" appearance="fill">
          <mat-label>metric</mat-label>
          <mat-select formControlName="metric" (selectionChange)="setDefaultMetricParam($event)">
            <mat-option *ngFor="let metric of metrics" [value]="metric.name" matTooltipPosition="right"
              [matTooltip]="metric.help">
              {{ metric.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <a *ngIf="secondFormGroup.get('metric').value === 'custom'" class="custom">
          Fill the code template before tuning
        </a>
        <ng-container *ngFor="let param of metricParams">
          <ng-container *ngIf="isArray(param.value)">
            <mat-form-field class="form-field" appearance="fill">
              <mat-label>{{ param.name }}</mat-label>
              <mat-select [(ngModel)]="metricParam" [ngModelOptions]="{standalone: true}">
                <mat-option *ngFor="let option of param.value" [value]="option">{{ option }}</mat-option>
              </mat-select>
            </mat-form-field>
          </ng-container>
          <ng-container *ngIf="typeOf(param.value) === 'boolean'">
            <mat-form-field class="form-field" appearance="fill">
              <mat-label>{{ param.name }}</mat-label>
              <mat-select [(ngModel)]="metricParam" [ngModelOptions]="{standalone: true}">
                <mat-option [value]="true">yes</mat-option>
                <mat-option [value]="false">no</mat-option>
              </mat-select>
            </mat-form-field>
          </ng-container>
          <ng-container *ngIf="typeOf(param.value) === 'string'">
            <mat-form-field class="form-field" appearance="fill">
              <mat-label>{{ param.name }}</mat-label>
              <input [(ngModel)]="metricParam" matInput [ngModelOptions]="{standalone: true}" matTooltipPosition="right"
                [matTooltip]="param.help">
            </mat-form-field>
          </ng-container>
        </ng-container>
      </mat-card>
    </form>
    <br>
    <div>
      <button mat-raised-button color="warn" routerLink="/my-models" queryParamsHandling="preserve">
        &#x2573; Cancel
      </button>
      <button mat-raised-button matStepperNext>
        <img class="navigation-icon" src="./../../assets/083-arrow-forward-right.svg">
        Next
      </button>
      <button mat-raised-button color="accent"
        [disabled]="firstFormGroup.status === 'INVALID' || secondFormGroup.status === 'INVALID'" routerLink="/my-models"
        (click)="addModel()" queryParamsHandling="preserve">
        <img class="navigation-icon" src="./../../assets/056a-save-solid-white.svg">
        Finish
      </button>
    </div>
  </mat-step>

  <mat-step [stepControl]="secondFormGroup" label="Advanced parameters" [completed]="false">
    <p class="required">
      * - required field
    </p>
    <h2>Tune</h2>
    <mat-card>
      <form [formGroup]="secondFormGroup">

        <mat-form-field class="form-field" appearance="fill">
          <mat-label>tuning strategy</mat-label>
          <mat-select formControlName="strategy">
            <mat-option *ngFor="let tuning of tunings" [value]="tuning.name" matTooltipPosition="right"
              [matTooltip]="tuning.help">
              {{ tuning.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field class="form-field" appearance="fill">
          <mat-label>accuracy goal</mat-label>
          <input type="number" formControlName="accuracyGoal" matInput>
        </mat-form-field>

        <mat-form-field class="form-field" appearance="fill">
          <mat-label>objective</mat-label>
          <mat-select formControlName="objective">
            <mat-option *ngFor="let objective of objectives" [value]="objective.name" matTooltipPosition="right"
              [matTooltip]="objective.help">
              {{ objective.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <br>
        <mat-form-field class="form-field" appearance="fill">
          <mat-label>timeout</mat-label>
          <input type="number" formControlName="timeout" matInput>
        </mat-form-field>

        <mat-form-field class="form-field" appearance="fill">
          <mat-label>max trials</mat-label>
          <input type="number" formControlName="maxTrials" matInput>
        </mat-form-field>

        <mat-form-field class="form-field" appearance="fill">
          <mat-label>random seed</mat-label>
          <input type="number" formControlName="randomSeed" matInput>
        </mat-form-field>

      </form>
    </mat-card>

    <h2>Quantization</h2>
    <mat-card>
      <form [formGroup]="secondFormGroup">

        <mat-form-field class="form-field" appearance="fill">
          <mat-label>approach</mat-label>
          <mat-select formControlName="approach">
            <mat-option *ngFor="let approach of approaches" [value]="approach.name" matTooltipPosition="right"
              [matTooltip]="approach.help">
              {{ approach.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <h3>Calibration</h3>
        <mat-card>
          <mat-form-field class="form-field" appearance="fill">
            <mat-label>sampling size</mat-label>
            <input formControlName="samplingSize" matInput placeholder="100">
          </mat-form-field>
        </mat-card>
      </form>
    </mat-card>

    <h2>Benchmarking</h2>
    <form [formGroup]="secondFormGroup">
      <mat-card>
        <form [formGroup]="secondFormGroup">
          <mat-form-field class="form-field" appearance="fill">
            <mat-label>batch size</mat-label>
            <input formControlName="batchSize" matInput value="1">
          </mat-form-field>
          <mat-form-field class="form-field" appearance="fill">
            <mat-label>warmup</mat-label>
            <input type="number" formControlName="warmup" matInput>
          </mat-form-field>
          <mat-form-field class="form-field" appearance="fill"
            [matTooltip]="'Default iteration is -1 (iterate all samples)'">
            <mat-label>iteration</mat-label>
            <input type="number" formControlName="iteration" matInput>
          </mat-form-field>
        </form>
      </mat-card>
      <br>
      <div>
        <button mat-raised-button color="warn" routerLink="/my-models" queryParamsHandling="preserve">
          &#x2573; Cancel
        </button>
        <button mat-raised-button matStepperPrevious>
          <img class="navigation-icon" src="./../../assets/081-arrow-back-left.svg">
          Back
        </button>
        <button mat-raised-button color="accent"
          [disabled]="firstFormGroup.status === 'INVALID' || secondFormGroup.status === 'INVALID'"
          routerLink="/my-models" (click)="addModel()" queryParamsHandling="preserve">
          <img class="navigation-icon" src="./../../assets/056a-save-solid-white.svg">
          Finish
        </button>
      </div>

    </form>
  </mat-step>
</mat-horizontal-stepper>