{% extends "admin/admin_base.html" %}
{% load static %}
{% block content-area %}
<div class="columns">
  <div class="column is-12">

    <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          Import text items
        </p>
        <a href="#" class="card-header-icon" aria-label="more options">
          <span class="icon">
            <i class="fas fa-angle-down" aria-hidden="true"></i>
          </span>
        </a>
      </header>
      <div class="card-content">
        <p>
          <b>To annotate texts, you first need to import a set of text items to annotate it.</b>
        </p>
        <ul.is-unstyled>
          <li>CSV file: file must contain a header with a text column or be one-column csv file.</li>
          <li>JSON file: each line should contain a json object with at least one key 'text', which contains a text.</li>
        </ul.is-unstyled>
        <form action="" method="post" enctype="multipart/form-data">
          {% csrf_token %}
          <div class="section">
            <div class="control">
              <label class="radio mb10">
                <input type="radio" name="format" value="csv" checked> Upload a CSV file from your computer<br>
                <input type="radio" name="format" value="json" checked> Upload a JSON file from your computer<br>
               </label>
              <div class="file has-name is-small mb20">
                <label class="file-label">
                  <input class="file-input" type="file" ref="file" name="file" required v-on:change="handleFileUpload()">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Select a file…
                    </span>
                  </span>
                  <span class="file-name">
                    [[ file ]]
                  </span>
                </label>
              </div>
            </div>
          </div>

          <div class="field is-grouped">
            <div class="control">
              <button type="submit" class="button is-primary">Upload dataset</button>
            </div>
            <div class="control">
              <button class="button is-text">Cancel</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block footer %}
<script src="{% static 'bundle/upload.js' %}"></script>
{% endblock %}