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

{% block contents %}
<h1 style="text-align: center;">
  Je récupère les livres, pour faire mon « panier »
</h1>
<p id="jeton" style="display:None">
  Je peux aller trouver mes livres jusqu'au : {{ jeton.perime }}
  <br>
  <span style="font-size: 50%;">{{ manuels }}</span>
</p>

<div class="qr-reader kk">
  <ul id="coches">
    {% for m in manuels %}
    <li data-abg="{{ m.abrege }}"><input type="checkbox" onclick="return false;"/>{{ m.abrege }}</li>
    {% endfor %}
  </ul>
  <h3 id="enregistre" style="text-align: center; display: none;">Tous les livres à prendre sont cochés. Si tous sont bien dans le « panier », je passe à l'enregistrement.</h3>
  <div id="qr-reader"></div>
  <div id='qr-reader-results'>
    <p>Scannez les QR-codes ...</p>
  </div>
  <div id="pres-du-pouce">
    <img src="{% static '/img/slm.svg' %}" style="opacity: 0.1; width: 250px;"/>
    <img src="{% static '/img/prendre.svg' %}" style="display: none; width: 250px; cursor: pointer;"/>
  </div>
</div>
<audio id="soundiconok" src="{% static '/img/xylofon.wav' %}"
       style="display: none;"></audio>
<audio id="soundiconko" src="{% static '/img/violoncello-7.wav' %}"
       style="display: none;"></audio>
<audio id="soundiconpris" src="{% static '/img/percussion-50.wav' %}"
       style="display: none;"></audio>
<audio id="soundiconreussi" src="{% static '/img/trumpet-12.wav' %}"
       style="display: none;"></audio>
<script src="{% static 'js/html5-qrcode.min.js' %}"></script>
<script>
  var tous_manuels = {{ tous_manuels|safe }};  // données de tous les manuels
  var a_chercher = {{ manuels|safe }}; // données des manuels à  prendre
  var dejapris = [];                   // liste des manuels dans le panier
  var tousCodes = {};                  // dictionnaire qr-code => abrégé
  var codes = {};                      // idem, seulement les livres à prendre
  $(document).ready(moisson_ready);    // initialisations quand le DOM est là
</script>
{% endblock %}
