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

{% block contents %}
<h3>
 {% translate "Élèves de" %} {{ n }}{% translate " qui doivent plus de" %} {{ nombre }} {% translate "livres" %}
</h3>
<p>
 {% translate "Liste imprimée le" %} {{ date }} {% translate ":" %} {{ eleves|length }} {% translate "élèves." %}
</p>
<div class="fond-blanc" style="display: flex;">
 <table class="multi">
  {% for e, d in eleves.items %}
  <tr>
   <td>
    {{ e.classe.libelle }}
   </td>
   <td>
    {{ e.NomPrenomEleve }}
   </td>
   <td>
    {{ d }}
   </td>
  </tr>
  {% endfor %}
 </table>
</div>
<script>
 /* recopié depuis https://jsfiddle.net/u6359y0w/3/ */
  /* d'après une réponse à https://stackoverflow.com/questions/31782272/css-multi-column-for-tables */
  $.fn.extend({
      multipleColumns: function(numCols) {
          var listTableRows = $('.multi').find('tbody tr'); /* get the list data */
          var numlistTableRows = listTableRows.length;        
          var numItemsPerCol = Math.ceil(numlistTableRows / numCols); /* divide by the number of columns requires */
          var currentColNum = 1,
              currentRowNumber = 1,
              returnHtml = '',
              i = 0;
        
          for (i = 1; i <= numCols; i++) {
              $('.multi').parent().append('<table class="column rose table-column-' + i + '"><thead>  <tr><th>Classe</th><th>Nom, prénom</th><th>Doit</th></tr></thead></table>');
          }
        
          $.each(listTableRows, function(i, v) {
              if (currentRowNumber <= numItemsPerCol) {                
                  currentRowNumber++;                
              } else {
                  currentColNum++;
                  currentRowNumber = 2;
              }
              $('.table-column-' + currentColNum).append(v);
          });
          $('.multi').remove(); /*clean previous content */
	  
      }
  });
  
  $('.multi').multipleColumns(3);
</script>
{% endblock %}

