<div class="modal-body">
  <h2 class="h2-title">Importer un fichier CSV/Excel</h2>
</div>
<div class="modal-footer">
  <form
    class="form-report"
    [formGroup]="form"
    (keydown.enter)="$event.preventDefault()"
  >
    <div class="d-flex flex-row align-items-center mb-4">
      <div class="form-outline form-group flex-fill mb-0 text-center">
        <input
          type="file"
          name="file"
          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          formControlName="file"
          (change)="onFileSelected($event)"
        />
        <p class="text-danger" *ngIf="submitted && form.get('file')?.errors?.required">
          Le fichier est requis
        </p>
        <p class="text-danger" *ngIf="submitted && form.get('file')?.errors?.invalidFormat">
          Format de fichier non pris en charge. Veuillez sélectionner un fichier CSV, XLS ou XLSX.
        </p>
      </div>
    </div>

    <div class="bouton">
      <button class="mat-raised-button cancel" type="button" (click)="closeDialog()">
        Annuler
      </button>
      <button
        class="mat-raised-button save"
        color="primary"
        type="button"
        [disabled]="isLoading"
        (click)="importingData()"
      >
        {{ isLoading ? 'Importation en cours...' : 'Importer' }}
      </button>
    </div>
  </form>
</div>