@if (isLoadingForm) {
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
}
<h2 mat-dialog-title>Reportar Problema</h2>
<mat-dialog-content class="remove-button-padding-dialog-content">
  <form [formGroup]="formGroup" class="override_content_flex">
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label> Tipo de Problema </mat-label>
        <input matInput formControlName="TIPO"/>
        @if (formGroup.controls['TIPO'].hasError('required')) {
          <mat-error title="El campo Tipo de Problema es requerido.">El campo <b>Tipo de Problema</b> es requerido.</mat-error>
        }
      </mat-form-field>
    </div>
    <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
            <mat-label> Descripción </mat-label>
            <textarea matInput formControlName="DESCRIPCION"></textarea>
            @if (formGroup.controls['DESCRIPCION'].hasError('required')) {
                <mat-error title="El campo Descripción es requerido.">El campo <b>Descripción</b> es requerido.</mat-error>
            }
        </mat-form-field>
    </div>   
  </form>
  <div class="input-file" onclick="getElementById('upfile').click();">
    <mat-icon matSuffix class="mr-5">file_upload</mat-icon>
    <span> Clic para subir evidencia </span>
    <input id="upfile" type="file" (change)="loadImg($event)" accept=".png,.jpg" multiple />
  </div>
  <mat-list role="list">
    @for (filesSelected of arrFileSelected; track filesSelected; let i = $index) {
      <mat-list-item role="listitem" [class.list-divider]="i < arrFileSelected.length - 1">
        <div class="list-content">
          <div>
            <mat-icon matSuffix>navigate_next</mat-icon>
            <img [src]="filesSelected.view" [alt]="filesSelected.file.name">
            <span>{{ resourcesService.resizeText( filesSelected.file.name, 27 ) }}</span>
          </div>
          <button mat-icon-button color="warn" matTooltip="Eliminar Imagen" (click)="alert('DELETE_TEMP', filesSelected.id)">
            <mat-icon>delete</mat-icon>
          </button>
        </div>
      </mat-list-item>
    }
  </mat-list>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [disabled]="isLoadingForm" (click)="closeDialog()" cdkFocusInitial>Cerrar</button>
  <button mat-button [disabled]="formGroup.invalid || isLoadingForm" (click)="alert('REPORT')">Reportar</button>
</mat-dialog-actions>