{% extends "base.html" %}
{% load i18n %}


{% block extra_head %}
<script>
  $(document).ready(function($) {
    const fileInput = document.querySelector('#import-voters input[type=file]');
    fileInput.onchange = () => {
      if (fileInput.files.length > 0) {
        const fileName = document.querySelector('#import-voters .file-name');
        fileName.textContent = fileInput.files[0].name;
      }
    }
  });

</script>
{% endblock %}

{% block content %}

<h1 class="title">{% trans "Importer une liste de votant·e·s" %}</h1>
<hr>

<div class="message is-warning">
  <div class="message-body">
    {% trans "Importez un fichier au format CSV, avec sur la première colonne les prénoms, sur la deuxième le nom et la troisième l'adresse email. Soit :<br><br><pre>Prénom_1,Nom_1,mail_1@machin.test<br>Prénom_2,Nom_2,mail_2@bidule.test<br>...</pre>" %}
  </div>
</div>

<div class="columns is-centered">
  <div class="column is-two-thirds">
    <form action="" method="post" id="import-voters">
      {% csrf_token %}

      {% include "forms/form.html" with errors=False %}

      <div class="field is-grouped is-centered">
        <div class="control is-expanded">
          <button class="button is-fullwidth is-outlined is-primary is-light">
            <span class="icon is-small">
              <i class="fas fa-check"></i>
            </span>
            <span>{% trans "Enregistrer" %}</span>
          </button>
        </div>
        <div class="control">
          <a class="button is-primary" href="{% url 'election.admin' election.pk %}">
            <span class="icon is-small">
              <i class="fas fa-undo-alt"></i>
            </span>
            <span>{% trans "Retour" %}</span>
          </a>
        </div>
      </div>
    </form>
  </div>
</div>

{% endblock %}
