<div class="upload-csv">
  <div class="upload-help body-s">
    @for (item of help; track item) {
      <div [innerHtml]="item | translate"></div>
    }
  </div>

  <div class="select-csv">
    <pa-button
      [kind]="buttonKind"
      (click)="onUpload()">
      {{ 'upload.select_csv' | translate }}
    </pa-button>
    <input
      (change)="readCsv($event)"
      #fileUpload
      type="file"
      accept="text/csv"
      hidden />
  </div>

  <ncom-hint label="CSV format details">
    <ul class="csv-format">
      <li>Use commas as field delimiter</li>
      <li>Fields containing commas or line breaks must be enclosed in double quotes</li>
      <li>Double quotes appearing inside a quoted field must be prefixed with an additional double quote</li>
      <li>Don't include a header line</li>
    </ul>
  </ncom-hint>
</div>
