<h1 mat-dialog-title [innerHTML]="uitextEditParamVariableValues"></h1>

  <div mat-dialog-content>

    <mat-form-field>
      <mat-select [placeholder]="uiTextModeSelection" [(value)]="selectedValueMode" (selectionChange)="onValueModeChange($event)"
        data-testid="variable-value-mode-select">
          <mat-option *ngFor="let e of valueModes" [value]="e.value">
              {{ e.label }}
          </mat-option>
      </mat-select>
    </mat-form-field>

    <div *ngIf="isMinMax" class="min-max-step-container">
        <form>
            <mat-form-field>
                <input matInput class="form-control" type="number" inputmode="numeric" name="min-value" step="0.01"
                    [placeholder]="uitextValeurMini" [(ngModel)]="param.minValue" #min="ngModel" name="min"
                    [appJalhydModelValidationMin]="param" required pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$">

                <mat-error *ngIf="min.errors">
                    <div *ngIf="min.errors.required || min.errors.pattern">
                        {{ uitextMustBeANumber }}
                    </div>
                    <div *ngIf="! min.errors.required && min.errors.jalhydModelMin">
                        {{ min.errors.jalhydModelMin.message }}
                    </div>
                </mat-error>
            </mat-form-field>

            <mat-form-field>
                <input matInput class="form-control" type="number" inputmode="numeric" name="max-value" step="0.01"
                    [placeholder]="uitextValeurMaxi" [(ngModel)]="param.maxValue" #max="ngModel" name="max"
                    [appJalhydModelValidationMax]="param" required pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$">

                    <mat-error *ngIf="max.errors">
                        <div *ngIf="max.errors.required || max.errors.pattern">
                            {{ uitextMustBeANumber }}
                        </div>
                        <div *ngIf="! max.errors.required && max.errors.jalhydModelMax">
                            {{ max.errors.jalhydModelMax.message }}
                        </div>
                    </mat-error>
            </mat-form-field>

            <mat-form-field>
                <input matInput class="form-control" type="number" inputmode="numeric" name="step-value" step="0.01"
                    [placeholder]="uitextPasVariation" [(ngModel)]="param.stepValue" #step="ngModel" name="step"
                    [appJalhydModelValidationStep]="param" required pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$">

                    <mat-error *ngIf="step.errors">
                        <div *ngIf="step.errors.required || step.errors.pattern">
                            {{ uitextMustBeANumber }}
                        </div>
                        <div *ngIf="! step.errors.required && step.errors.jalhydModelStep">
                            {{ step.errors.jalhydModelStep.message }}
                        </div>
                    </mat-error>
            </mat-form-field>
        </form>
    </div>

    <div *ngIf="isListe">
        <form [formGroup]="valuesListForm">
            <mat-form-field>
                <textarea matInput matTextareaAutosize [placeholder]="uitextListeValeurs" formControlName="valuesList"
                    [value]="valuesList"></textarea>
                    <!-- (input)="valuesList = $event.target.value" -->
                <mat-error>
                    <span *ngIf="valuesListForm.controls.valuesList.hasError('model')">
                        {{ valuesListForm.controls.valuesList.errors.model }}
                    </span>
                    <span *ngIf="! valuesListForm.controls.valuesList.hasError('model')">
                        {{ uitextMustBeListOfNumbers }}
                    </span>
                </mat-error>
            </mat-form-field>

            <div class="decimal-separator-and-file-container" fxLayout="row wrap" fxLayoutAlign="space-between start">
                <mat-form-field class="decimal-separator" fxFlex.gt-xs="1 0 auto" fxFlex.lt-sm="1 0 100%">
                    <mat-select [placeholder]="uitextDecimalSeparator" [(value)]="decimalSeparator"
                        data-testid="decimal-separator-select">
                        <mat-option *ngFor="let e of decimalSeparators" [value]="e.value">
                            {{ e.label }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

                <div fxHide.xs fxFlex.gt-xs="0 0 16px"></div>

                <mat-form-field class="values-file file-input-field" fxFlex.gt-xs="1 0 auto" fxFlex.lt-sm="1 0 100%">
                    <ngx-mat-file-input #valuesFile [placeholder]="uitextImportFile"
                        (change)="onFileSelected($event)" formControlName="file">
                    </ngx-mat-file-input>
                    <button mat-icon-button matSuffix *ngIf="!valuesFile.empty" (click)="valuesFile.clear($event)">
                        <mat-icon>clear</mat-icon>
                    </button>
                </mat-form-field>
            </div>
        </form>
    </div>

  </div>

  <div mat-dialog-actions>
    <div *ngIf="isMinMax">
        <button mat-raised-button [mat-dialog-close]="true" cdkFocusInitial>
            {{ uitextClose }}
        </button>
    </div>
    <div *ngIf="isListe">
        <button mat-raised-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>
            {{ uitextCancel }}
        </button>
        <button mat-raised-button color="warn" (click)="onValidate()">
            {{ uitextValidate }}
        </button>
    </div>
  </div>