<div class="animated fadeIn prevent-select" (window:resize)="onResize()" [ngClass]="{ items_container: screenSize > 640, 
items_container_full_width: screenSize <= 640 }">
  <div id="navigation" class="mb-8">
    <div class="prev-page prevent-select raised-button-background mat-elevation-z8" (click)="goBack(1)" matRipple>
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Órdenes de trabajo correctivo</div>
    </div>
  </div>
  <mat-card style="width: 100%; height: 100%;" [ngClass]="{ override_elevation_z8: screenSize > 640, override_elevation_z0: screenSize <= 640 }">
    <mat-card-title style="text-align: center; margin: 15px 0;">{{ action }} orden de trabajo correctivo sin mediciones</mat-card-title>
    <mat-card-content>
      <div class="form-order-container" *ngIf="isLoading">
        <div class="is-loading animated fadeIn fast">
          <mat-spinner align="center"></mat-spinner>
          <h3>Cargando datos ...</h3>
        </div>
      </div>

      <div class="form-order-container" *ngIf="!isLoading && hasError">
        <div class="has-error animated fadeIn fast">
          <mat-icon class="red_primary_font mb-40" >error</mat-icon>
          <h3>{{ errorStr }}</h3>
        </div>
      </div>

      <div class="form-order-container animated fadeIn pt-2" *ngIf="!isLoading && !hasError">
        <div class="form-column" [formGroup]="noMeasuresFormGroup">
          <div class="form-row">
            @for (field of noMeasuresFormFields; track $index) {
              <div class="form-cell C04">
                @if (field.fieldType == 'TE-1'){
                  <mat-form-field appearance="outline" class="w-100">
                    <mat-label>{{ field.label }}</mat-label>
                    <input 
                      matInput 
                      #input
                      [formControlName]="field.fieldID + 'Control'" 
                      [readonly]="field.validators.includes('HORA')" 
                      [type]="field.validators.includes('CONT') && !noMeasuresFormVisibilities[field.fieldID] ? 'password' : 'text'"
                      (input)="validateInput(input.value, field.fieldID)"
                    >
                    <a mat-icon-button matSuffix *ngIf="field.validators.includes('CONT')" 
                    (click)="noMeasuresFormVisibilities[field.fieldID] = !noMeasuresFormVisibilities[field.fieldID]">
                      <mat-icon>{{ noMeasuresFormVisibilities[field.fieldID] ? 'visibility_off' : 'visibility' }}</mat-icon>
                    </a>
                    <button mat-icon-button matSuffix *ngIf="field.validators.includes('HORA')" (click)="openHourSelector(input.value, field.fieldID + 'Control')" 
                    [disabled]="!field.enabled">
                      <mat-icon>schedule</mat-icon>
                    </button>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('required')">
                      Este campo es requerido.
                    </mat-error>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('minlength')">
                      Longitud mínima de {{ field.minLength }} caracteres.
                    </mat-error>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('maxlength')">
                      Longitud máxima de {{ field.maxLength }} caracteres.
                    </mat-error>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('email')">
                      Formato inválido.
                    </mat-error>
                  </mat-form-field>
                } @else if (field.fieldType == 'FE-2') {
                  <mat-form-field appearance="outline" class="w-100">
                    <mat-label>{{ field.label }}</mat-label>
                    <input
                      matInput
                      #inputDate
                      [matDatepicker]="picker"
                      [formControlName]="field.fieldID + 'Control'" 
                    >
                    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('required')">
                      Este campo es requerido.
                    </mat-error>
                  </mat-form-field>
                } @else if (field.fieldType == 'CT-3') {
                  <mat-form-field appearance="outline" class="w-100">
                    <mat-label>{{ field.label }}</mat-label>
                    <textarea 
                      matInput
                      #inputTextArea
                      [formControlName]="field.fieldID + 'Control'" 
                      [style.resize]="field.allowResize" 
                      [cols]="field.cols"
                      [rows]="field.rows"
                      (input)="validateInput(inputTextArea.value, field.fieldID)"
                    ></textarea>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('required')">
                      Este campo es requerido.
                    </mat-error>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('minlength')">
                      Longitud mínima de {{ field.minLength }} caracteres.
                    </mat-error>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('maxlength')">
                      Longitud máxima de {{ field.maxLength }} caracteres.
                    </mat-error>
                  </mat-form-field>
                } @else if (field.fieldType == 'SE-4') {
                  <mat-form-field appearance="outline" class="w-100">
                    <mat-label>{{ field.label }}</mat-label>
                    <mat-select [multiple]="field.isMultiple" [formControlName]="field.fieldID + 'Control'" #inputSelector 
                    (valueChange)="validateInput(inputSelector.value, field.fieldID)">
                      <mat-option *ngIf="field.includeEmptyOption" value="N">--Ninguno--</mat-option>
                      <mat-option *ngFor="let option of field.selectorOptions" [value]="option.value">
                        {{ option.label }}
                      </mat-option>
                    </mat-select>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('required')">
                      Este campo es requerido.
                    </mat-error>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('minlength')">
                      Longitud mínima de {{ field.minLength }} caracteres.
                    </mat-error>
                    <mat-error *ngIf="noMeasuresFormGroup.controls[field.fieldID + 'Control'].hasError('maxlength')">
                      Longitud máxima de {{ field.maxLength }} caracteres.
                    </mat-error>
                  </mat-form-field>
                } @else if (field.fieldType == 'CL-5') {
                  <mat-form-field appearance="outline" class="w-100">
                    <mat-label>{{ field.label }}</mat-label>
                    <input matInput type="text" [formControlName]="field.fieldID + 'Control'">
                    <ngx-colors 
                      style="margin-left: -16px;" 
                      matSuffix 
                      ngx-colors-trigger 
                      [formControlName]="field.fieldID + 'ColorControl'"
                    ></ngx-colors>
                  </mat-form-field>
                }
              </div>
            }
          </div>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions>
      <div class="form-version-label">{{ formLabel }}</div>
      <button mat-button [disabled]="noMeasuresFormGroup.invalid || savingOrder" (click)="saveNoMeasuresOder()">
        {{ isNew ? 'Generar' : 'Actualizar' }} orden de trabajo
      </button>
    </mat-card-actions>
  </mat-card>
</div>