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

{% block contents %}
{% if jeton.estValide %}
<h1 style="text-align: center;">
  Je prépare la visite dans la Coop en mode « boutique »
</h1>
<p id="jeton" style="display: none;">
  Le jeton est {{ jeton }}
</p>
<form>
  {% csrf_token %}
  <label for="nomprenom">Je me nomme :</label><br>
  <input type="text" placeholder="NOM Prénom" id="nomprenom"
	 name="nomprenom" {% if nomprenom %} value="{{ nomprenom }}" {% endif %}/>
  <button type="button" onclick="efface_nomprenom()" style="margin-right: 5px;">
    <img src="{% static '/img/edit-delete.svg' %}" alt="RAZ nomprenom" title="Effacer le nom" style="width: 16px;"/>
  </button>
</form>
<div id="classe-livres" style="display: none;">
  <div class="fond-blanc">
    <p class="mi-largeur">
      <b>Ma classe est</b> : <span id="nom-classe"></span>
      <br style="display: block; margin: 3px 0;">
      <b>LV2, spécialités, options</b> : <br>
      <span id="options"></span>
    </p>
    <p class="mi-largeur instructions">
      Je vérifie la classe, la langue vivante 2, les spécialités et les options,
      puis je vois plus bas, pour basculer les étiquettes entre
      la zone « livres à prendre » (verte) et la zone « livres à laisser »
      (rose, tout en bas).
      <br style="display: block; margin: 3px 0;">
      Quand le choix des livres est correct, je pousse le bouton
      « OK, livres vérifiés » qui est entre les deux zones, et je confirme
      encore une fois.
    </p>
    <p class="conseil">
      Si cette classe, ou si ces options ne sont pas les bonnes, je le signale
      à un des bénévoles de la Coopérative.
    </p>
  </div>
  <div id="choix-livres" class="fond-blanc">
    <div id="livres-choisis" class="fondvert">
    </div>
    <div id="separation" class="separateur-noir">
      <span class="flechehaut">⇈</span> livres à prendre
      <span class="flechehaut">⇈</span>
      <div id="choix-boutique-ok" onclick="moisson()" style="cursor: pointer; vertical-align: middle;">
	<div class="container">
	  <span class="ok">OK,</span> livres vérifiés !
	</div>
      </div>
      <span class="flechebas">⇊</span>
      livres à laisser <span class="flechebas">⇊</span>
    </div>
    <div id="autres-livres" class="fondrose"></div>
  </div>
</div>

<div id="msg" style="display: none;">
  J'ai bien vérifié que tous les livres choisis, sur fond vert,
  correspondent exactement à ma liste pour cette année ... ?
</div>
<audio id="soundiconko" src="{% static '/img/violoncello-7.wav' %}"
       style="display: none;"></audio>

<script>
  boutique_init();
</script>
{% else %}
<h1>Le jeton est périmé, la session est finie</h1>
La fin de validité du jeton était : {{ jeton.perime }}
{% endif %}
{% endblock %}
