{% extends "main.html" %}
{% load bootstrap4 %}

{% block title %}Sondages{% endblock %}

{% block head %}
  <script type="text/javascript">
    function traiteTouche(e) {
      touche = (
        window.event
        ? e.keyCode
        : e.which);
      if (touche == 13 || touche == 15) {
        document
          .getElementById("envoi_choix")
          .click();
        return false;
      }

      return true;
    }
  </script>
{% endblock %}

{% block content %}
  <div class="default-container">
    <h1>Édition du sondage « {{ sondage }} »</h1>

    <a href="{% url 'sondages:accueil' %}">« Accueil</a>

    <form method="post" action="" onkeydown="return traiteTouche(event);">
      <fieldset>
        <legend>Choix de sondage</legend>

        {% if erreur %}
          <div class="champ avec_erreurs">
            <ul class="errorlist">
              <li>Veuillez entrer au moins deux choix.</li>
            </ul>
          </div>
        {% endif %}
        {% for field in form %}
          <div class="champ{% if field.errors %} avec_erreurs{% endif %}">
            {{ field.errors }}
            {{ field.label_tag }}
            {{ field }}
            {% if field.field.a_bouton_moins %}
              <button type="submit"
                    name="moins_{{ field.name }}">−</button>
            {% endif %}
            {% if field.field.a_bouton_plus %}
              <button
                    type="submit" name="plus">+</button>
            {% endif %}
          </div>
        {% endfor %}

        <div class="float-right">
          <a href="{% url 'sondages:edition_infos' sondage.slug %}" class="btn btn-secondary">« Précédent</a>
          <input type="submit" id="envoi_choix" name="envoi_choix" value="Suivant »" class="btn btn-primary"/>
        </div>
      </fieldset>
    </form>
  </div>

{% endblock %}