@if (isLoadingForm) {
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
}
<h2 mat-dialog-title> Registro de documento </h2>
<mat-dialog-content [formGroup]="formGroup">

  @if (!isLoading) {
    <form [formGroup]="formGroup" class="override_content_flex">

      <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label> Nombre del documento </mat-label>
          <input matInput formControlName="NOMBRE_ARCHIVO">
          @if (formGroup.controls['NOMBRE_ARCHIVO'].hasError('required')) {
            <mat-error title="El campo Nombre del documento es obligatorio"> El campo <b>Nombre del documento</b> es obligatorio </mat-error>
          }
        </mat-form-field>
      </div>
  
      <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label> Tipo archivo </mat-label>
          <mat-select formControlName="TIPO_ARCHIVO">
            @for (typeFile of arrTypeFile; track typeFile) {
              <mat-option [value]="typeFile.code"> ({{ typeFile.code }}) {{ typeFile.category }}</mat-option>
            }
          </mat-select>
          @if (formGroup.controls['TIPO_ARCHIVO'].hasError('required')) {
            <mat-error title="El campo Tipo archivo es obligatorio"> El campo <b>Tipo archivo</b> es obligatorio </mat-error>
          }
        </mat-form-field>
      </div>
      
      <div class="input-file raised-button-background " onclick="getElementById('upfile').click()">
        <mat-icon matSuffix style="margin-right: 5px;">file_upload </mat-icon>
        <span> {{ nameButton }} </span>
        <input id="upfile" type="file" (change)="loadDocument($event)"/>
      </div>
  
    </form>
  } @else {
    <app-loading-card [isLoading]="isLoading"  txtLoading="Cargando formulario" />
  }
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button [disabled]="formGroup.invalid" (click)="alert()">Guardar</button>
</mat-dialog-actions>
