<h1 mat-dialog-title>Registrar archivo nuevo</h1>
<div mat-dialog-content class="prevent-select">
  <div style="display: flex;width: 100%;flex-direction: column;" *ngIf="!isLoading && !hasError" class="animated fadeIn">
    <mat-form-field appearance="outline" class="w-100 mt-8">
      <mat-label>Módulo</mat-label>
      <mat-select #module (valueChange)="moduleChanged(module.value)" [formControl]="moduleControl">
        <mat-option *ngFor="let module of modulesArr" [value]="module.code">
          {{ module.name }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="moduleControl.hasError('required')">Este campo es requerido.</mat-error>
    </mat-form-field>
    <mat-form-field appearance="outline" class="w-100 mt-8">
      <mat-label>Clasificación</mat-label>
      <mat-select [formControl]="clasificationControl">
        <mat-option *ngFor="let clas of clasificationsArr" [value]="clas.code">
          {{ clas.category }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="clasificationControl.hasError('required')">Este campo es requerido.</mat-error>
    </mat-form-field>
    <input type="file" name="file" id="file" #file class="hidden" (change)="checkFile($event)">
    <button mat-stroked-button class="w-100 mb-20" (click)="openFileUploader()" *ngIf="uploadedFile == null && !isUploading">
      Adjuntar archivo
    </button>
    <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="isUploading"></mat-progress-bar>
    <h3 *ngIf="isUploading" style="text-align: center;" class="mt-4 mb-20">Cargando archivo...</h3>
    <div *ngIf="uploadedFile != null" class="file-info-container mb-20">
      <div class="file-name">{{ uploadedFile.name! }}</div>
      <div class="file-size">{{ uploadedFile.size! }}</div>
      <div class="delete-ref red_primary_font" (click)="deleteTempFile()">Eliminar</div>
    </div>
    <div style="display: flex;justify-content: center;align-items: center;" class="mb-20">
      <mat-slide-toggle [disabled]="module.value != 'GMPR' && module.value != 'GMCO'" [(ngModel)]="hasOrder" (change)="checkIfOrdersNeeded($event)">
        Asociar a una orden de trabajo
      </mat-slide-toggle>
    </div>
    <mat-form-field appearance="outline" class="w-100">
      <mat-label>Orden de trabajo asociada</mat-label>
      <mat-select [formControl]="orderControl">
        <mat-option *ngFor="let order of workOrders" [value]="order.IDORDEN">
          Orden #{{ order.NUMORDEN }} - {{ order.TIPOACTIVADOR }} - <span style="font-weight: 500;">{{ order.PRIORIDAD }}</span>
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>
  <div class="has-error animated fadeIn fast" *ngIf="!isLoading && hasError">
    <mat-icon  class="red_primary_font">error</mat-icon>
    <h3>{{ errorStr }}</h3>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button [disabled]="uploadedFile == null || moduleControl.invalid || clasificationControl.invalid" (click)="saveFinalFile()">
    Continuar
  </button>
</div>