<pa-modal-advanced fitContent>
  <pa-modal-title>
    {{ 'upload.q_and_a' | translate }}
  </pa-modal-title>
  <pa-modal-content>
    <div class="upload-qna-content">
      @if (standalone) {
        @if ((hasValidKey | async) === false) {
          <div
            class="warning body-s"
          [innerHTML]="'standalone.upload-no-nua-key' | translate"></div>
        }
      }

      <p
        class="body-m"
      [innerHTML]="'upload.qna_csv_description' | translate"></p>

      <pa-input [formControl]="resourceTitle">Resource title</pa-input>

      <pa-select
        [formControl]="questionFormat"
        [label]="'upload.question_format' | translate">
        <pa-option value="PLAIN">PLAIN</pa-option>
        <pa-option value="MARKDOWN">MARKDOWN</pa-option>
        <pa-option value="KEEP_MARKDOWN">KEEP MARKDOWN</pa-option>
        <pa-option value="HTML">HTML</pa-option>
        <pa-option value="RST">RST</pa-option>
      </pa-select>
      <pa-select
        [formControl]="answerFormat"
        [label]="'upload.answer_format' | translate">
        <pa-option value="PLAIN">PLAIN</pa-option>
        <pa-option value="MARKDOWN">MARKDOWN</pa-option>
        <pa-option value="KEEP_MARKDOWN">KEEP MARKDOWN</pa-option>
        <pa-option value="HTML">HTML</pa-option>
        <pa-option value="RST">RST</pa-option>
      </pa-select>

      <app-csv-select
        [buttonKind]="qna.length === 0 ? 'primary' : 'secondary'"
        [fields]="2"
      (select)="displayCsv($event)"></app-csv-select>

      @if (qna.length > 0) {
        <pa-table
          class="csv-preview"
          columns="repeat(2,1fr)">
          <pa-table-header>
            <pa-table-cell header>{{ 'upload.qna_csv_preview.question' | translate }}</pa-table-cell>
            <pa-table-cell header>{{ 'upload.qna_csv_preview.answer' | translate }}</pa-table-cell>
          </pa-table-header>
          @for (row of qna; track row) {
            <pa-table-row>
              <pa-table-cell>{{ row[0] }}</pa-table-cell>
              <pa-table-cell>{{ row[1] }}</pa-table-cell>
            </pa-table-row>
          }
        </pa-table>
      }
    </div>
  </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]="resourceTitle.invalid || qna.length === 0 || isUploading">
      {{ 'generic.add' | translate }}
    </pa-button>
  </pa-modal-footer>
</pa-modal-advanced>
