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

{% block contents %}
<h1>
 {% translate "Impression de cartes de membres" %}
</h1>
<button id="inventaire" onclick="location ='/cartes'" style="margin:5px 0;">
 {% translate "⏮ Retour à la page de choix des cartes" %}
</button>
<br/>
<!-- Ce formulaire caché permet de lancer l'impression des cartes de membre  -->
<form action="/cartes_membres_print_go" id="go" method="post" style="display: none">
 {% csrf_token %}
 <input name="id_eleves" type="text" value="{{ id_eleves }}"/>
 <input name="max_nb" type="text" value="{{ max_nb }}"/>
</form>
<button class="actionbuttons" id="printButton" onclick="cartes_membres_print_go()" style="vertical-align: top;">
 <img alt="Créer le fichier PDF" src="{% static '/img/document-print.svg' %}" title="{% translate 'Créer le fichier PDF' %}"/>
</button>
{% if classes %}
<div id="info" style="display: inline-block; width: 500px; padding: 5px;">
 <p>
  <b>
   {% translate "Classes visées" %}
  </b>
  {% translate " :" %}
    {{ classes }}
    {% translate "(" %}{{ len_eleves }} {% translate "éleves)." %}
 </p>
 <p>
  {% translate "Il faut prévoir" %}
  <b>
   {{ derniere }} {% translate "feuilles" %}
  </b>
  {% translate "pré-découpées dans l'imprimante." %}
 </p>
</div>
{% endif %}
<!-- ce formulaire permet de choisir le nombre de cartes de la première page -->
<form action="#" method="post">
 {% csrf_token %}
 <input name="classes_chosen" type="hidden" value="{{ classes }}"/>
 <input name="nomprenom" type="hidden" value="{{ nomprenom }}"/>
 <fieldset>
  <p>
   {% translate "La première page peut être une page où il manque déjà des morceaux. Les pages suivantes sont supposée complètes, au format A4." %}
  </p>
  <label for="max_nb">
   {% translate "Nombre de cartes imprimables en première feuille" %}
  </label>
  <div id="myslider" style="display: inline-block; width: 60px; padding:5px;">
    <select id="max_nb" name="max_nb" style="width: 50px;">
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
  </div>
  <button id="preview">
   {% translate "Prévisualiser" %}
  </button>
 </fieldset>
</form>
<h2>
 {% translate "Prévisualisation de la première page" %}
  {% if max_nb < 6 %}
  {% translate "(limitée à" %} {{ max_nb }} {% translate "cartes)" %}
  {% endif %}
</h2>
<div id="previsualisation_cartes_membre" style="display: inline-block;">
 <svg height="297" width="210">
  <pattern height="4" id="diagonalHatch" patternunits="userSpaceOnUse" width="4">
   <path d="M-1,1 l2,-2
               M0,4 l4,-4
               M3,5 l2,-2" style="stroke:black; stroke-width:1">
   </path>
  </pattern>
  <rect fill="url(#diagonalHatch)" height="297" style="stroke-width:1;stroke:rgb(0,0,0)" width="210">
  </rect>
  {% for r in rects %}
    {{ r | safe }}
    {% endfor %}
 </svg>
</div>
<div id="pagination" style="display: inline-block;">
 <table class="tableau-donnees">
  <tr>
   <th>
    {% translate "Page" %}
   </th>
   <th>
    {% translate "Cartes de" %}
    <br/>
    {% translate "membre" %}
   </th>
  </tr>
  {% for c in cartes %}
  <tr>
   <td>
    {{ c.page }}
   </td>
   <td>
    {{ c.imprime }}
   </td>
  </tr>
  {% endfor %}
 </table>
</div>
<script>
 function cartes_membres_print_init(){
     var select = $( "#max_nb" );
     select.val({{ max_nb }});
     var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
	 min: 1,
	 max: 5,
	 range: "min",
	 value: select[ 0 ].selectedIndex + 1,
	 slide: function( event, ui ) {
	     select[ 0 ].selectedIndex = ui.value - 1;
	 }
      });
      
      $( "#max_nb" ).on( "change", function() {
	  slider.slider( "value", this.selectedIndex );
      });
  }
  
  function cartes_membres_print_go(){
      var form = $("#go");
      form.submit();
  }
</script>
<script>
 cartes_membres_print_init();
</script>
{% endblock %}

