<mat-horizontal-stepper #stepper>
  <mat-step [completed]="false">
    <ng-template matStepLabel>Name</ng-template>
    <h2>Name</h2>
    <p>Set the name of the benchmark.</p>
    <mat-form-field class="form-field long" appearance="outline">
      <mat-label>benchmark name</mat-label>
      <input required [(ngModel)]="name" matInput>
    </mat-form-field>
    <br>
    <div class="float-right">
      <button mat-raised-button matStepperNext>
        <img class="navigation-icon" src="./../../assets/083-arrow-forward-right.svg">
        Next
      </button>
    </div>
  </mat-step>
  <mat-step [completed]="false">
    <ng-template matStepLabel>Mode</ng-template>
    <h2>Mode</h2>
    <p>Choose benchmark mode to decide if you want to check accuracy or performance.</p>
    <mat-form-field class="form-field long" appearance="outline">
      <mat-label>mode</mat-label>
      <mat-select required [(ngModel)]="mode">
        <mat-option *ngFor="let mode of modes" [value]="mode">{{ mode }}</mat-option>
      </mat-select>
    </mat-form-field>
    <br>
    <div class="float-right">
      <button mat-raised-button matStepperNext>
        <img class="navigation-icon" src="./../../assets/083-arrow-forward-right.svg">
        Next
      </button>
    </div>
  </mat-step>
  <mat-step [completed]="false">
    <ng-template matStepLabel>Model</ng-template>
    <h2>Model</h2>
    <p>Choose if you want to benchmark input model or one of the optimized models.</p>
    <mat-form-field class="form-field long" appearance="outline">
      <mat-label>model</mat-label>
      <mat-select required [(ngModel)]="modelId">
        <mat-option *ngFor="let model of models" [value]="model.id">{{ model.name }}</mat-option>
      </mat-select>
    </mat-form-field>
    <br>
    <div class="float-right">
      <button mat-raised-button matStepperNext>
        <img class="navigation-icon" src="./../../assets/083-arrow-forward-right.svg">
        Next
      </button>
    </div>
  </mat-step>
  <mat-step [completed]="false">
    <ng-template matStepLabel>Dataset</ng-template>
    <h2>Dataset</h2>
    <p>Choose the dataset to run the benchmark on.</p>
    <mat-form-field class="form-field long" appearance="outline">
      <mat-label>dataset</mat-label>
      <mat-select required [(ngModel)]="datasetId">
        <mat-option *ngFor="let dataset of datasets" [value]="dataset.id">{{ dataset.name }}</mat-option>
      </mat-select>
    </mat-form-field>
    <br>
    <div class="float-right">
      <button mat-raised-button matStepperNext>
        <img class="navigation-icon" src="./../../assets/083-arrow-forward-right.svg">
        Next
      </button>
    </div>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Parameters</ng-template>
    <form [formGroup]="benchmarkFormGroup">
      <h3>Batch size</h3>
      <mat-form-field class="form-field" appearance="outline">
        <mat-label>batch size</mat-label>
        <input formControlName="batchSize" matInput value="1">
      </mat-form-field>
      <h3>Iterations</h3>
      <mat-form-field class="form-field" appearance="outline"
        matTooltip="Number of iterations to run before the benchmark">
        <mat-label>warmup</mat-label>
        <input type="number" formControlName="warmup" matInput>
      </mat-form-field>
      <mat-form-field class="form-field" appearance="outline"
        [matTooltip]="'Default iteration is -1 (iterate all samples)'">
        <mat-label>iterations</mat-label>
        <input type="number" formControlName="iterations" matInput>
      </mat-form-field>
      <h3>Instances</h3>
      <mat-form-field class="form-field" appearance="outline">
        <mat-label>cores per instance</mat-label>
        <input min=1 step=1 type="number" formControlName="coresPerInstance" matInput>
      </mat-form-field>
      <mat-form-field class="form-field" appearance="outline">
        <mat-label>number of instances</mat-label>
        <input min=1 step=1 type="number" formControlName="numOfInstance" matInput>
      </mat-form-field>
      <a class="cores-warning" *ngIf="!coresValidated()">
        <img class="warning-icon" src="./../../assets/006a-alert-solid-red.svg">
        cores_per_instance * num_of_instance should not be greater than number of cores
        ({{ benchmarkFormGroup.get('cores_per_instance').value }}
        * {{ benchmarkFormGroup.get('num_of_instance').value }}
        > {{ modelService.systemInfo['sockets'] * modelService.systemInfo['cores_per_socket'] }})
      </a>
      <br>
      <div class="float-right">
        <button id="finish-adv-btn" mat-raised-button mat-dialog-close color="accent"
          [disabled]="benchmarkFormGroup.status === 'INVALID' || !coresValidated()" (click)="addBenchmark()"
          queryParamsHandling="preserve">
          <img class="navigation-icon" src="./../../assets/056a-save-solid-white.svg">
          Finish
        </button>
      </div>
    </form>
  </mat-step>
</mat-horizontal-stepper>