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

{% block contents %}
<div class="fond-blanc">
  <div id="a_qui_ce_livre" class="inline400">
    <h3>À qui est ce livre ?</h3>
    <a href="/revue_du_stock">revue du stock</a>
    <form>
      <label for="idlivre">Numéro du livre :</label>
      <input type="text" id="idlivre" name="idlivre" placeholder="00000"/>
    </form>
    <div id="donnees_livre">
    </div>
  </div>
  <div id="etat_classe" class="inline400">
    <h3>État par classe : livres dus, par élève</h3>
    Choisir une classe
    <select id="etat_classe_select" onchange="etat_classe(this)">
      <option> -------- </option>
      {% for c in classes %}
      <option>{{ c }}</option>
      {% endfor %}
    </select>
    <h3>Élèves qui doivent plus de trois livres</h3>
    <a href="/eleves_plus_3/secondes" class="button">Secondes</a>
    <a href="/eleves_plus_3/premieres" class="button">Premières</a>
    <a href="/eleves_plus_3/terminales" class="button">Terminales</a>
    <form id="classe-form" action="/print_etat_classe" method="post" target="_blank" style="display: none">
      {% csrf_token %}
      <input name="classe" id="classe-input" type="text"/>
    </form>
  </div>
  <div id="livres_niveau_filiere" class="inline400">
    <h3>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">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="Voir les livres"/>
    </form>
  </div>
</div>
<div class="fond-blanc">
  <div id="accordion">
    <h3>Livres non prêtés</h3>
    <div>
      <form>
	<label for="quelsLivres">Préciser les livres :</label>
	<input type="text" id="quelsLivres" name="quelsLivres" placeholder="N'importe quel titre ..." style="width: 500px;"/>
      </form>
      <p>
	affichage progressif ...
	<span id="nb-affiches">0</span> /
	<span id="nb-total">total</span>
      </p>
      <div id="livres-non-pretes" class="liste-livres" title="Livres prêtés">
	<div id="en-stock" class="flexcontainer">
	</div>
	<div class="timericon" style="display: none;">
	  <img src="{% static '/img/timer1.gif' %}" alt="By Andrikkos - Own work, CC0, https://commons.wikimedia.org/w/index.php?curid=33919822" style="margin: 0 auto; width: 150px;"/>
	</div>
      </div>
    </div>
    <h3>Livres prêtés à quelqu'un</h3>
    <div>
      <form>
	<label for="quelsLivresPretes">Préciser les livres :</label>
	<input type="text" id="quelsLivresPretes" name="quelsLivresPretes" placeholder="N'importe quel titre ..." style="width: 500px;"/>
      </form>
      <p>
	affichage progressif ...
	<span id="nb-pretes-affiches">0</span> /
	<span id="nb-pretes-total">total</span>
      </p>
      <div id="livres-pretes" class="liste-livres" title="Livres prêtés">
	<div id="en-pret" class="flexcontainer">
	</div>
	<div class="timericon" style="display: none;">
	  <img src="{% static '/img/timer1.gif' %}" alt="By Andrikkos - Own work, CC0, https://commons.wikimedia.org/w/index.php?curid=33919822" style="margin: 0 auto; width: 150px;"/>
	</div>
      </div>
    </div>
    <h3>Élèves avec au moins un livre prêté</h3>
    <div>
      <div class="flexcontainer">
	<div style="width: 400px">
	  <form>
	    <label for="classe_pretes">Précisez une classe :</label>
	    <input type="text" id="classe_pretes" name="classe_pretes" placeholder="nom de classe" />
	  </form>
	  <p>
	    affichage progressif ...
	    <span id="eleves-pretes-affiches">0</span> /
	    <span id="eleves-pretes-total">total</span>
	  </p>
	</div>
	<button onclick="print_eleves_avec_livres()">
	  <img src="{% static '/img/document-print.svg' %}" alt="Imprimer la liste des élèves avec livres"
	       title="Export à un format imprimable"/>
	</button>
      </div>
      <div id="eleves-pretes" class="liste-eleves-prets" title="élèves avec au moins un livre prêté">
	<div id="el-prets" class="flexcontainer eleves">
	</div>
	<div class="timericon" style="display: none;">
	  <img src="{% static '/img/timer1.gif' %}" alt="By Andrikkos - Own work, CC0, https://commons.wikimedia.org/w/index.php?curid=33919822" style="margin: 0 auto; width: 150px;"/>
	</div>
      </div>
    </div>
    <h3>Élèves sans aucun livre prêté</h3>
    <div>
      <div class="flexcontainer">
	<div style="width: 400px">
	  <form>
	    <label for="classe_pretes">Précisez une classe :</label>
	    <input type="text" id="classe_sans_prets" name="classe_sans_prets" placeholder="nom de classe" />
	  </form>
	  <p>
	    affichage progressif ...
	    <span id="eleves-sans-prets-affiches">0</span> /
	    <span id="eleves-sans-prets-total">total</span>
	  </p>
	</div>
	<button onclick="print_eleves_sans_livres()">
	  <img src="{% static '/img/document-print.svg' %}" alt="Imprimer la liste des élèves sans livres"
	       title="Export à un format imprimable"/>
	</button>
      </div>
      <div id="eleves-sans-prets" class="liste-eleves-sans-prets" title="élèves avec au moins un livre prêté">
	<div id="el-sans-prets" class="flexcontainer eleves">
	</div>
	<div class="timericon" style="display: none;">
	  <img src="{% static '/img/timer1.gif' %}" alt="By Andrikkos - Own work, CC0, https://commons.wikimedia.org/w/index.php?curid=33919822" style="margin: 0 auto; width: 150px;"/>
	</div>
      </div>
    </div>
  </div>
</div>
<div id="message">
</div>
<script>inventaire_init()</script>
{% endblock %}
