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

{% block contents %}
{% if jeton.estValide %}
<h1 style="text-align: center;">
 {% translate "Je prépare la visite dans la Coop en mode « boutique »" %}
</h1>
<p id="jeton" style="display: none;">
 {% translate "Le jeton est" %} {{ jeton }}
</p>
<form>
 {% csrf_token %}
 <label for="nomprenom">
  {% translate "Je me nomme :" %}
 </label>
 <br/>
 <input %}="" endif="" id="nomprenom" if="" name="nomprenom" nomprenom="" placeholder="{% translate 'NOM Prénom' %}" type="text" value="{{ nomprenom }}" {%=""/>
 <button onclick="efface_nomprenom()" style="margin-right: 5px;" type="button">
  <img alt="RAZ nomprenom" src="{% static '/img/edit-delete.svg' %}" style="width: 16px;" title="{% translate 'Effacer le nom' %}"/>
 </button>
</form>
<div id="classe-livres" style="display: none;">
 <div class="fond-blanc">
  <p class="mi-largeur">
   <b>
    {% translate "Ma classe est" %}
   </b>
   {% translate ":" %}
   <span id="nom-classe">
   </span>
   <br style="display: block; margin: 3px 0;"/>
   <b>
    {% translate "LV2, spécialités, options" %}
   </b>
   {% translate " :" %}
   <br/>
   <span id="options">
   </span>
  </p>
  <p class="mi-largeur instructions">
   {% translate "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;"/>
   {% translate "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">
   {% translate "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 class="fond-blanc" id="choix-livres">
  <div class="fondvert" id="livres-choisis">
  </div>
  <div class="separateur-noir" id="separation">
   <span class="flechehaut">
    {% translate "⇈" %}
   </span>
   {% translate " livres à prendre" %}
   <span class="flechehaut">
    {% translate "⇈" %}
   </span>
   <div id="choix-boutique-ok" onclick="moisson()" style="cursor: pointer; vertical-align: middle;">
    <div class="container">
     <span class="ok">
      {% translate "OK," %}
     </span>
     {% translate "livres vérifiés !" %}
    </div>
   </div>
   <span class="flechebas">
    {% translate "⇊" %}
   </span>
   {% translate "livres à laisser " %}
   <span class="flechebas">
    {% translate "⇊" %}
   </span>
  </div>
  <div class="fondrose" id="autres-livres">
  </div>
 </div>
</div>
<div id="msg" style="display: none;">
 {% translate "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>
 {% translate "Le jeton est périmé, la session est finie" %}
</h1>
{% translate "La fin de validité du jeton était :" %} {{ jeton.perime }}
{% endif %}
{% endblock %}

