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

{% block contents %}
<!--
    conteneur pour des chaînes à traduire pour la fonction JS AfficheurDeleves
  -->
<div style="display:none;" id="ade"
     data-nompretes="{% translate '{e} ({p} prêts)' %}"
     data-savoirplus="{% translate 'En savoir plus...' %}"
     >
</div>
<div class="fond-blanc">
  <div class="inline400" id="a_qui_ce_livre">
    <h3>
      {% translate "À qui est ce livre ?" %}
    </h3>
    <a href="/revue_du_stock">
      {% translate "revue du stock" %}
    </a>
    <form>
      <label for="idlivre">
	{% translate "Numéro du livre :" %}
      </label>
      <input id="idlivre" name="idlivre" placeholder="{% translate '00000' %}" type="text"/>
    </form>
    <div id="donnees_livre">
    </div>
  </div>
  <div class="inline400" id="etat_classe">
    <h3>
      {% translate "État par classe : livres dus, par élève" %}
    </h3>
    {% translate "Choisir une classe" %}
    <select id="etat_classe_select" onchange="etat_classe(this)">
      <option>
	{% translate "--------" %}
      </option>
      {% for c in classes %}
      <option>
	{{ c }}
      </option>
      {% endfor %}
    </select>
    <h3>
      {% translate "Élèves qui doivent des livres" %}
    </h3>
    <table class="rose">
      <tr>
	<th>
	  {% translate "Quatre livres ou plus :" %}
	</th>
	<td>
	  <a class="button" href="/eleves_plus_n/secondes/4" target="blank">
	    {% translate "Secondes" %}
	  </a>
	</td>
	<td>
	  <a class="button" href="/eleves_plus_n/premieres/4" target="blank">
	    {% translate "Premières" %}
	  </a>
	</td>
	<td>
	  <a class="button" href="/eleves_plus_n/terminales/4" target="blank">
	    {% translate "Terminales" %}
	  </a>
	</td>
      </tr>
      <tr>
	<th>
	  {% translate "Un livre ou plus :" %}
	</th>
	<td>
	  <a class="button" href="/eleves_plus_n/secondes/1" target="blank">
	    {% translate "Secondes" %}
	  </a>
	</td>
	<td>
	  <a class="button" href="/eleves_plus_n/premieres/1" target="blank">
	    {% translate "Premières" %}
	  </a>
	</td>
	<td>
	  <a class="button" href="/eleves_plus_n/terminales/1" target="blank">
	    {% translate "Terminales" %}
	  </a>
	</td>
      </tr>
    </table>
    <form action="/print_etat_classe" id="classe-form" method="post" style="display: none" target="_blank">
      {% csrf_token %}
      <input id="classe-input" name="classe" type="text"/>
    </form>
  </div>
  <div class="inline400" id="livres_niveau_filiere">
    <h3>
      {% translate "Listes de livres prévisibles" %}
    </h3>
    <form action="livres_pour" method="post" target="_blank">
      {% csrf_token %}
      <table>
	<tr>
	  <th style="text-align: right;">
	    <label for="niveau">
	      {% translate "Catégorie :" %}
	    </label>
	  </th>
	  <td>
	    <select id="categorie" name="categorie">
	      {% for c in categories %}
	      <option>
		{{ c }}
	      </option>
	      {% endfor %}
	    </select>
	  </td>
	</tr>
      </table>
      <input type="submit" value="{% translate 'Voir les livres' %}"/>
    </form>
  </div>
</div>
<div class="fond-blanc">
  <div id="accordion">
    <h3>
      {% translate "Livres prêtés, non prêtés" %}
    </h3>
    <div id="livres_pretes_non_pretes">
      <div class="flexcontainer">
	<div style="width: 400px;">
	  <form>
	    <label for="quelsLivres">
	      {% translate "Préciser les livres :" %}
	    </label>
	    <input id="quelsLivres" name="quelsLivres" placeholder="{% translate 'N&apos;importe quel titre ...' %}" style="width: 95%;" type="text"/>
	  </form>
	</div>
	<div style="margin: 1.3ex 0;">
	  {% translate "prêtés :" %}
	  <span id="livres_pretes"></span>,
	  {% translate "non-prêtés :" %} 
	  <span id="livres_non_pretes"></span>,
	  {% translate "total :" %} 
	  <span id="livres_total"></span>
	</div>
	<div class="progress" style="margin: 1ex;">
	  <div class="progress-label">0 %</div>
	</div>
      </div>
    </div>
    <h3>
      {% translate "Élèves avec au moins un livre prêté" %}
    </h3>
    <div id="eleves_un_livre">
      <div class="flexcontainer">
	<div style="width: 400px">
	  <form>
	    <label for="classe_pretes">
	      {% translate "Précisez une classe :" %}
	    </label>
	    <input id="classe_pretes" name="classe_pretes" placeholder="{% translate 'nom de classe' %}" type="text"/>
	  </form>
	</div>
	<button onclick="print_eleves_avec_livres()">
	  <img alt="Imprimer la liste des élèves avec livres" src="{% static '/img/document-print.svg' %}" title="{% translate 'Export à un format imprimable' %}"/>
	</button>
	<div style="margin-left: 5ex;">
	  {% translate "la sélection comporte" %}
	  <span id="eleves_plus_livres"></span>
	  {% translate "élève(s)" %} /
	  <span id="eleves_plus_livres_total"></span>
	  <div class="progress" style="margin: 1ex;">
	    <div class="progress-label">0 %</div>
	  </div>
	</div>
      </div>
    </div>
    <h3>
      {% translate "Élèves sans aucun livre prêté" %}
    </h3>
    <div id="eleves_zero_livre">
      <div class="flexcontainer">
	<div style="width: 400px">
	  <form>
	    <label for="classe_pretes">
	      {% translate "Précisez une classe :" %}
	    </label>
	    <input id="classe_sans_prets" name="classe_sans_prets" placeholder="{% translate 'nom de classe' %}" type="text"/>
	  </form>
	</div>
	<div>
	  <button onclick="print_eleves_sans_livres()">
	    <img alt="Imprimer la liste des élèves sans livres" src="{% static '/img/document-print.svg' %}" title="{% translate 'Export à un format imprimable' %}"/>
	  </button>
	</div>
	<div style="margin-left: 5ex;">
	  {% translate "la sélection comporte" %}
	  <span id="eleves_moins_livres"></span>
	  {% translate "élève(s)" %} /
	  <span id="eleves_moins_livres_total"></span>
	  <div class="progress" style="margin: 1ex;">
	    <div class="progress-label">0 %</div>
	  </div>
	</div>
      </div>
    </div>
  </div>
</div>
<div id="message">
</div>
<script>
  inventaire_init()
</script>
{% endblock %}