<mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
<h2 mat-dialog-title> {{ type === 'REG' ? 'Registro' : 'Modificación'}} de Información </h2>
<mat-dialog-content>
  <div align="center" *ngIf="isLoading">
    <mat-spinner></mat-spinner>
  </div>
  <div *ngIf="!isLoading" [formGroup]="formGroupInformation">
    <div class="override_content_flex mt-10" >
      <div class="col-flex-12">
        <mat-form-field appearance="outline">
          <mat-label>Proveedor</mat-label>
          <mat-select formControlName="PROVEEDOR">
            <mat-option *ngFor="let provider of arrProvider" [value]="provider"> {{ provider.PROV_NOCO }} </mat-option>
          </mat-select>
            <mat-icon matSuffix>person</mat-icon>
          <mat-error *ngIf="formGroupInformation.controls['PROVEEDOR'].hasError('required')">El campo <b>Proveedor</b> es requerido</mat-error>
        </mat-form-field>
      </div>
      <div class="col-flex-12">
        <mat-form-field appearance="outline">
          <mat-label>Tipo</mat-label>
          <mat-select formControlName="TIPO_UNIDAD">
            <mat-option *ngFor="let unit of arrUnits" [value]="unit.ID_UNIDAD">{{ unit.UNIDAD }}</mat-option>
          </mat-select>
          <mat-icon matSuffix>inventory_2</mat-icon>
          <mat-error *ngIf="formGroupInformation.controls['TIPO_UNIDAD'].hasError('required')">El campo <b>Tipo</b> es requerido</mat-error>
        </mat-form-field>
      </div>
      <div class="col-flex-12">
        <mat-form-field appearance="outline">
          <mat-label>Descripción</mat-label>
          <textarea matInput formControlName="DESCRIPCION"></textarea>
          <mat-icon matSuffix>subject</mat-icon>
          <mat-error *ngIf="formGroupInformation.controls['DESCRIPCION'].hasError('required')">El campo <b>Descripción</b> es requerido</mat-error>
        </mat-form-field>
      </div>
      <div class="col-flex-12">
        <mat-form-field appearance="outline">
          <mat-label>Características</mat-label>
          <mat-icon matSuffix>subject</mat-icon>
          <textarea matInput formControlName="CARACTERISTICAS"></textarea>
        </mat-form-field>
      </div>
      <div class="col-flex-12">

        <div class="input-file" onclick="getElementById('upfile').click();">
          <mat-icon matSuffix class="mr-5">file_upload</mat-icon>
          <span> Clic para subir imágenes </span>
          <input id="upfile" type="file" (change)="uploadTempFile($event)" accept=".png,.jpg" multiple />
        </div>
      </div>
      <div class="col-flex-12">
        <mat-list role="list">
          <mat-list-item *ngFor="let filesSelected of arrFileSelected; let i = index" 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)">
                <mat-icon>delete</mat-icon>
              </button>
            </div>
          </mat-list-item>
        </mat-list>
        <!-- <mat-list role="list" *ngIf="arrFilesSelected.length > 0" class="p-0">
          <mat-list-item *ngFor="let filesSelected of arrFilesSelected; let i = index" role="listitem"
              [style.border-bottom]=" (i < arrFilesSelected.length - 1) ? '1px #0000001f solid' : 'none'"
              [style.display]="filesSelected.status !== 'DELETE' ? 'block' : 'none'"
              >
              <div style="display: flex; justify-content: space-between; align-items: center;">
                  <div style="display: flex; align-items: center;">
                      <mat-icon matSuffix>navigate_next</mat-icon>
                      <img [src]="filesSelected.base64File" [alt]="filesSelected.nameFile" style="height: 50px; margin-right: 20px;">
                      <span>{{ resourcesService.resizeText( filesSelected.nameFile, 27 ) }}</span>
                  </div>
                  <button mat-icon-button color="warn" matTooltip="Eliminar Imagen" (click)="alert('DELETE_IMAGE', filesSelected)">
                      <mat-icon>delete</mat-icon>
                  </button>
              </div>
              <mat-divider></mat-divider>
          </mat-list-item>
        </mat-list> -->
      </div>
    </div>
    <mat-checkbox formControlName="COMPRA_WEB">Compra Web</mat-checkbox>
  </div>

</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="false" [disabled]="isLoading">Cancelar</button>
  <button mat-button (click)="save()" [disabled]="formGroupInformation.invalid || isLoading">
    {{ type === 'REG' ? 'Registrar' : 'Modificar'}}
  </button>
</mat-dialog-actions>