<h1>Add new dataset</h1>
<p>Set your custom dataset name, dataset type, its location and other parameters.</p>
<mat-dialog-content>
  <form [formGroup]="datasetFormGroup">
    <mat-card>
      <mat-form-field class="form-field" appearance="outline">
        <mat-label>Dataset name</mat-label>
        <input formControlName="name" matInput matTooltipPosition="right">
      </mat-form-field>
      <br>
      <span class="inline">
        <mat-form-field class="form-field" appearance="outline">
          <mat-label>dataset type</mat-label>
          <mat-select formControlName="dataLoaderEvaluation" (selectionChange)="setDefaultDataLoaderParam($event)">
            <mat-option *ngFor="let dataLoader of dataLoaders" [value]="dataLoader.name" matTooltipPosition="right"
              [ngClass]="dataLoader.name === 'custom' ? 'custom-option' : null" [matTooltip]="dataLoader.help">
              {{ dataLoader.name === 'custom' ? '(Add your custom data loader)' : dataLoader.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </span>
      <a *ngIf="datasetFormGroup.get('dataLoaderEvaluation').value === 'custom'" class="warning">
        <img class="warning-icon" src="./../../assets/006a-alert-solid-orange.svg">
        Fill the code template before tuning
      </a>
      <span *ngIf="showDatasetLocation" class="inline">
        <mat-form-field class="form-field long" appearance="outline">
          <mat-label>dataset location</mat-label>
          <input formControlName="datasetLocationEvaluation" matInput>
        </mat-form-field>
        <button id="choose-dataset-btn" mat-raised-button color="primary" class="browse choose-file-btn"
          (click)="openDialog('datasetLocationEvaluation', 'datasets', 'datasetLocation')">
          <img class="icon" src="./../../assets/050a-folder-solid-white.svg">
          Choose dataset
        </button>
      </span>
      <br />
      <span class="inline">
        <ng-container *ngFor="let param of dataLoaderParams">
          <ng-container *ngIf="param.name !== 'root'">
            <mat-form-field [ngClass]="{'form-field' : true, 'long': fileBrowserParams.includes(param.name)}"
              appearance="outline">
              <mat-label>{{ param.label || param.name }}</mat-label>
              <input [(ngModel)]="param.value" matInput [ngModelOptions]="{standalone: true}" matTooltipPosition="right"
                [matTooltip]="param.help">
            </mat-form-field>
            <button id="choose-eval-btn" *ngIf="fileBrowserParams.includes(param.name)" mat-raised-button
              color="primary" class="browse choose-file-btn" (click)="openDialog(param.name, 'all', 'evaluation')">
              <img class="icon" src="./../../assets/050a-folder-solid-white.svg">
              Choose file
            </button>
          </ng-container>
        </ng-container>
      </span>
    </mat-card>

    <ng-container *ngIf="datasetFormGroup.get('dataLoaderEvaluation').value !== 'custom'">
      <h2>Transforms
        <a href="https://github.com/intel/neural-compressor/blob/master/docs/transform.md" target="_blank">
          <img class="help-icon" src="./../../assets/005a-help-solid-blue.svg" matTooltip="Click to open documentation">
        </a>
      </h2>
      <p>Add transformations to the dataset or leave this section empty.</p>
      <mat-card>
        <ng-container *ngFor="let transformItem of transformationParams; let index = index; let last = last">
          <span class="inline">
            <mat-form-field class="form-field" appearance="outline">
              <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"
                  [ngClass]="transformation.name === 'custom' ? 'custom-option' : null" matTooltipPosition="right"
                  [matTooltip]="transformation.help">
                  {{ transformation.name === 'custom' ? '(Add your custom transformation)' :
                  transformation.name
                  }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <ng-container *ngIf="isArray(transformItem['params'])">
              <ng-container *ngFor="let param of transformItem['params']; let index = index">
                <ng-container *ngIf="resizeValues && param.name === 'size'">
                  <mat-form-field class="form-field" appearance="outline">
                    <mat-label>size</mat-label>
                    <mat-select [(ngModel)]="param.value" [ngModelOptions]="{standalone: true}">
                      <mat-option *ngFor="let resizeValue of resizeValues" [value]="resizeValue"
                        matTooltipPosition="right" [ngClass]="resizeValue === 'custom' ? 'custom-option' : null"
                        [matTooltip]="param.help">
                        {{ resizeValue === 'custom' ? '(Add your custom size)' : resizeValue }}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </ng-container>
                <mat-form-field *ngIf="resizeValues && param.name === 'size' && param.value === 'custom'"
                  class="form-field" appearance="outline">
                  <mat-label>{{ param.label || param.name }}</mat-label>
                  <input [(ngModel)]="resizeCustom" matInput [ngModelOptions]="{standalone: true}"
                    matTooltipPosition="right" [matTooltip]="param.help">
                </mat-form-field>
                <mat-form-field *ngIf="!resizeValues || param.name !== 'size'" class="form-field" appearance="outline">
                  <mat-label>{{ param.label || param.name }}</mat-label>
                  <input [(ngModel)]="param.value" matInput [ngModelOptions]="{standalone: true}"
                    matTooltipPosition="right" [matTooltip]="param.help">
                </mat-form-field>
                <button [attr.id]="'choose-tranform-file-btn' + index" *ngIf="fileBrowserParams.includes(param.name)"
                  mat-raised-button color="primary" class="browse choose-file-btn"
                  (click)="openDialog(param.name, 'all', transformItem['params'])">
                  <img class="icon" src="./../../assets/050a-folder-solid-white.svg">
                  Choose file
                </button>
              </ng-container>
            </ng-container>
            <button id="remove-transform-btn" mat-icon-button color="warn" class="browse"
              (click)="removeTransformation(index)" matTooltip="Remove this transformation">
              <img class="icon" src="./../../assets/057b-trash-outlined.svg">
            </button>
          </span>
          <br *ngIf="!last">
        </ng-container>
        <button id="new-transform-btn" mat-raised-button color="accent" class="browse" (click)="addNewTransformation()">
          <img class="icon" src="./../../assets/008a-plus-solid.svg">
          Add new transformation
        </button>
      </mat-card>
    </ng-container>

    <h2>Metric
      <a href="https://github.com/intel/neural-compressor/blob/master/docs/metrics.md" target="_blank">
        <img class="help-icon" src="./../../assets/005a-help-solid-blue.svg" matTooltip="Click to open documentation">
      </a>
    </h2>
    <p>Choose metric to use with this dataset.</p>
    <mat-card>
      <mat-form-field class="form-field" appearance="outline">
        <mat-label>metric</mat-label>
        <mat-select formControlName="metric" (selectionChange)="setDefaultMetricParam($event)">
          <mat-option *ngFor="let metric of metrics" [value]="metric.name" matTooltipPosition="right"
            [ngClass]="metric.name === 'custom' ? 'custom-option' : null" [matTooltip]="metric.help">
            {{ metric.name === 'custom' ? '(Add your custom metric)' : metric.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <a *ngIf="datasetFormGroup.get('metric').value === 'custom'" class="warning">
        <img class="warning-icon" src="./../../assets/006a-alert-solid-orange.svg">
        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="outline">
            <mat-label>{{ param.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="outline">
            <mat-label>{{ param.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 [ngClass]="{'form-field' : true, 'long': fileBrowserParams.includes(param.name)}"
            appearance="outline">
            <mat-label>{{ param.label || param.name }}</mat-label>
            <input [(ngModel)]="metricParam" matInput [ngModelOptions]="{standalone: true}" matTooltipPosition="right"
              [matTooltip]="param.help">
          </mat-form-field>
          <button id="choose-eval-btn" *ngIf="fileBrowserParams.includes(param.name)" mat-raised-button color="primary"
            class="browse choose-file-btn" (click)="openDialog(param.name, 'all', 'metric')">
            <img class="icon" src="./../../assets/050a-folder-solid-white.svg">
            Choose file
          </button>
        </ng-container>
      </ng-container>
    </mat-card>
  </form>
</mat-dialog-content>

<br />
<div class="float-right">
  <button id="finish-adv-btn" mat-raised-button mat-dialog-close color="accent" class="browse"
    [disabled]="datasetFormGroup.status === 'INVALID'" (click)="addDataset()" queryParamsHandling="preserve">
    <img class="navigation-icon" src="./../../assets/056a-save-solid-white.svg">
    Finish
  </button>
</div>