{% extends '@admin/index.twig' %}

{% block content %}
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3 border-bottom">
    <h1 class="h2">
      <i aria-hidden="true" class="bi bi-upload"></i>
      {{ adminHeaderImport }}
    </h1>
  </div>

  <div class="card shadow mb-4" id="divImportColumns">
    <h5 class="card-header py-3">
      {{ adminHeaderCSVImportColumns }}
    </h5>
    <div class="card-body">
      <div class="row">
        <div class="col-md-12">
          <p>{{ msgImportRecordsColumnStructure }}</p>
          <div class="table-responsive">
            <table class="table table-striped table-bordered">
              <tbody>
                <tr>
                  <td><strong>{{ categoryId }} *</strong></td>
                  <td><strong>{{ question }} *</strong></td>
                  <td><strong>{{ 'msgAnswer' | translate }} *</strong></td>
                  <td><strong>{{ 'msgKeywords' | translate }}</strong></td>
                  <td><strong>{{ languageCode }} *</strong></td>
                  <td><strong>{{ 'msgAuthor' | translate }} *</strong></td>
                  <td><strong>{{ 'msgEmail' | translate }} *</strong></td>
                  <td><strong>{{ is_active }} *</strong></td>
                  <td><strong>{{ 'msgStickyFAQ' | translate }} *</strong></td>
                </tr>
                <tr>

                  <td></td>
                  <td></td>
                  <td></td>
                  <td>{{ 'msgSeparateWithCommas' | translate }}</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>{{ trueFalse }}</td>
                  <td>{{ trueFalse }} </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="card shadow mb-4">
    <form id="uploadCSVFileForm" method="post" action="./api/faqs/import"
          enctype="multipart/form-data" data-pmf-csrf="{{ csrfToken }}">
      <h5 class="card-header py-3">
        {{ adminHeaderCSVImport }}
      </h5>
      <div class="card-body">
        <p>{{ adminBodyCSVImport }}</p>
        <div class="row">
          <label class="col-lg-4 col-form-label">{{ adminImportLabel }}:</label>
          <div class="col-lg-8">
            <input type="file" id="fileInputCSVUpload" name="userfile">
          </div>
        </div>
        <div class="form-row row">
          <div class="d-flex justify-content-center">
            <button class="btn btn-primary btn-lg m-2" type="submit" id="submitButton">
              <i aria-hidden="true" class="bi bi-upload"></i> {{ adminCSVImport }}
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>

{% endblock %}