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

{% block contents %}
<h1 style="text-align: center;">
 {% translate "Je récupère les livres, pour faire mon « panier »" %}
</h1>
<p id="jeton" style="display:None">
 {% translate "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 onclick="return false;" type="checkbox"/>
      {{ m.abrege }}
    </li>
    {% endfor %}
  </ul>
  <div id="progress-moisson" onclick="showBoutiqueBoutons()">
    <progress max="100" value="0"></progress>
  </div>
 <h3 id="enregistre" style="text-align: center; display: none;">
  {% translate "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>
   {% translate "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 %}

