<pa-modal-dialog>
  <pa-modal-title>
    <div class="dialog-title-with-button">
      {{ 'upload.texts' | translate }}
      <pa-button
        icon="cross"
        aspect="basic"
        (click)="close()">
        {{ 'generic.close' | translate }}
      </pa-button>
    </div>
  </pa-modal-title>
  <pa-modal-content>
    @if (csv.length > pendingResourcesLimit) {
      <nsi-info-card
        type="warning"
        icon="warning">
        {{ 'upload.slow-upload' | translate: { limit: pendingResourcesLimit | number } }}
      </nsi-info-card>
    }
    @if (standalone && (hasValidKey | async) === false) {
      <div
        class="warning-key body-s"
      [innerHTML]="'standalone.upload-no-nua-key' | translate"></div>
    }
    <app-csv-select
      [help]="['upload.csv_description', 'upload.csv_format', 'upload.csv_labels']"
      [fields]="4"
    (select)="checkCsv($event)"></app-csv-select>
    @if (csv.length > 0) {
      <div
        class="uploads"
        >
        @for (row of csv; track row) {
          <div
            class="upload">
            <span paEllipsisTooltip>{{ row.title }}</span>
            <code>{{ row.format }}</code>
          </div>
        }
      </div>
    }
    @if (isUploading) {
      <nsi-spinner
      size="small"></nsi-spinner>
    }
  </pa-modal-content>
  <pa-modal-footer>
    <pa-button
      aspect="basic"
      (click)="close()">
      {{ 'generic.cancel' | translate }}
    </pa-button>
    <pa-button
      type="submit"
      kind="primary"
      (click)="upload()"
      [disabled]="csv.length === 0 || isUploading">
      {{ 'generic.add' | translate }}
    </pa-button>
  </pa-modal-footer>
</pa-modal-dialog>
