{% extends 'gestion/base.html' %}
{% load i18n %}
{% load static %}

{% block contents %}
<h1>{% translate "Étiquettes pour poster des courriers" %}</h1>
<input id="noms" type="hidden" value="{{ noms }}" />

<button class="actionbuttons" id="printButton" onclick="action_courrier_go()">
 <img alt="Créer le fichier PDF" src="{% static '/img/document-print.svg' %}" title="{% translate 'Créer le fichier PDF' %}"/>
</button>
<p class="message_preview">
  Voici un aspect de la page d'étiquettes imprimables. Cliquez sur
  les zones à éviter (étiquettes manquantes), puis quand c'est bon,
  sur le bouton d'impression ci-dessus. <br>
  <b>Vert = on imprime ; rouge = on n'imprime pas.</b>
</p>
<p id="compte" class="message_preview"></p>
<table class="etiquettes">
  {% for l in lignes %}
  <tr>
    {% for c in colonnes %}
    <td onclick="toggle(this, 'tabou'); recompte()">
      {{ l }}, {{ c }}
    </td>
    {% endfor %}
  </tr>
  {% endfor %}
</table>

<script>
  function toggle(elt, cls){
      elt = $(elt)
      if (elt.hasClass(cls)) elt.removeClass(cls);
      else elt.addClass(cls);
  }

  function recompte(){
      var nTabou = $(".tabou").length;
      var parPage = $("td").length;
      var nNoms = JSON.parse($("#noms").val()).length;
      var n1 = Math.min(parPage - nTabou, nNoms);
      var autresPages = Math.ceil((nNoms - n1)/parPage);
      var autresPagesPleines = Math.trunc((nNoms - n1)/parPage);
      var n2 = (nNoms - n1) - parPage * autresPagesPleines;
      $("#compte").text(
	  "On imprimera " + n1 +
	      " étiquettes en première page ; il faut prévoir " +
	      autresPages + " pages en plus et on imprimera " +
	      n2 + " étiquettes en dernière page supplémentaire."
      );
  }
  
  $("body").ready(recompte);

</script>
{% endblock %}
