{% 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 %}

<div class="level is-flex-widescreen">
  <div class="level-left">
    <div class="item-level">
      <h1 class="title">{% trans "Gestion de la liste de votant·e·s" %}</h1>
    </div>
  </div>

  <div class="level-right">
    {% if not election.sent_mail %}
    <div class="level-item">
      <a class="button is-light is-outlined is-primary" href="{% url 'election.mail-voters' election.pk %}">
        <span class="icon">
          <i class="fas fa-envelope-open"></i>
        </span>
        <span>{% trans "Envoyer le mail d'annonce" %}</span>
      </a>
    </div>
    {% endif %}

    <div class="level-item">
      <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>
</div>
<hr>

{# Si on a déjà envoyé le mail avec les identifiants, on ne peut plus changer la liste #}
{% if not election.sent_mail %}
<div class="message is-warning">
  <div class="message-body">
    {% trans "Importez un fichier au format CSV, avec sur la première colonne le login, sur la deuxième, le nom et prénom et enfin l'adresse email sur la troisième. Soit :<br><br><pre>Login_1,Prénom/Nom_1,mail_1@machin.test<br>Login_2,Prénom/Nom_2,mail_2@bidule.test<br>...</pre>" %}
  </div>
</div>

<div class="columns is-centered">
  <div class="column is-two-thirds">
    {% if form.non_field_errors %}
    <div class="notification is-danger">
      <button class="delete"></button>
      {% for error in form.non_field_errors %}
      {{ error }}<br>
      {% endfor %}
    </div>
    {% endif %}

    <form action="" method="post" enctype="multipart/form-data" 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 "Importer" %}</span>
          </button>
        </div>

      </div>
    </form>
  </div>
</div>
<br>
{% endif %}

{# Liste des votant·e·s #}
{% if voters %}
<h3 class="subtitle">{% trans "Liste des votant·e·s pour cette élection" %}</h3>
<hr>

<div class="columns is-centered">
  <div class="column is-two-thirds">
    <table class="table is-fullwidth is-bordered is-striped has-text-centered">
      <thead>
        <tr>
          <th>{% trans "Login" %}</th>
          <th>{% trans "Nom" %}</th>
          <th>{% trans "Email" %}</th>
        </tr>
      </thead>

      <tbody>
        {% for v in voters %}
        <tr>
          <td>{{ v.get_username }}</td>
          <td>{{ v.full_name }}</td>
          <td>{{ v.email }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}


{% endblock %}
