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

{% block contents %}
<!--
    Textes à traduire pour la fonction JS livre_supplement_go
  -->
<div id="lsg" style="display: none;"
     data-nobook="{% translate 'Vous n&apos;avez pas déclaré de livre à emprunter' %}"
     data-nostudent="{% translate 'Vous n&apos;avez pas déclaré d&apos;élèves concernés par les emprunts' %}"
     data-noprof="{% translate 'Nom incorrect : « {p} »' %}"
     data-erreur="{% translate 'Erreur' %}"
     data-oktitle="{% translate 'Demande prise en compte' %}"
     data-prets="{% translate '{lp} prêt(s) demandé(s) pour {le} élèves' %}"
     >
</div>
<h1>
 {% translate "Livres supplémentaires à emprunter, par un groupe d'élèves" %}
</h1>
<div class="padded-boxes twice">
 <section>
  <h3 class="heading">
   {% translate "Mode d'emploi" %}
  </h3>
  <div class="padded">
   <ul>
    <li>
     {% translate "je donne mon nom," %}
    </li>
    <li>
     {% translate "je choisis le ou les livres supplémentaires," %}
    </li>
    <li>
     {% translate "je désigne les élèves qui devront emprunter ces livres ;" %}
    </li>
    <li>
     {% translate "Quand c'est fait, Je valide." %}
    </li>
   </ul>
  </div>
 </section>
</div>
<div class="padded-boxes">
 <section class="rightalign">
  <div class="padded">
   <label for="nomprenom">
    {% translate "Je m'appelle :" %}
   </label>
  </div>
 </section>
 <section>
  <div class="padded">
   <input id="prof" placeholder="{% translate 'Nom Prénom' %}" type="text"/>
  </div>
 </section>
</div>
<div class="padded-boxes">
 <section class="rightalign">
  <div class="padded">
   <label for="titre">
    {% translate "J'ajoute un livre à prêter :" %}
   </label>
  </div>
 </section>
 <section>
  <div class="padded">
   <input id="titre" placeholder="{% translate 'Quelques caractères du titre ...' %}" type="text"/>
  </div>
 </section>
</div>
<div class="padded-boxes twice" id="les-livres" style="display: none;">
 <section>
  <h3 class="heading">
   {% translate "Liste de livres" %}
  </h3>
  <div class="padded plus">
  </div>
 </section>
</div>
<div class="padded-boxes">
 <section class="rightalign">
  <div class="padded">
   <label for="nomprenom">
    {% translate "J'ajoute un élève :" %}
   </label>
  </div>
 </section>
 <section>
  <div class="padded">
   <input id="nomprenom" placeholder="{% translate 'Quelques caractères du nom ou du prénom ...' %}" type="text"/>
  </div>
 </section>
</div>
<div class="padded-boxes twice" id="les-eleves" style="display: none;">
 <section>
  <h3 class="heading">
   {% translate "Liste d'élèves" %}
  </h3>
  <div class="padded plus">
  </div>
 </section>
</div>
<div class="padded-boxes twice">
 <section id="commentaire">
  <h3 class="heading">
   {% translate "Validation" %}
  </h3>
  <div class="padded" style="text-align: center;">
   <textarea cols="50" placeholder="{% translate 'Un bref commentaire (en option) ...' %}" rows="3"></textarea>
   <br/>
   <button onclick="livre_supplement_go()">
    <span style="font-size: 140%;">
     {% translate "Je valide les données ci-dessus" %}
    </span>
   </button>
  </div>
 </section>
</div>
<p>
 {% translate "N.B. : Merci de poster un message, par exemple via" %}
 <a href="https://pronote.lyceejeanbart.fr" target="other">
  {% translate "Pronote" %}
 </a>
 {% translate ", à un bénévole de la Coopérative pour attirer son attention, après avoir validé le livre et la liste d'élèves." %}
</p>
<div id="message">
</div>
<script>
 livre_supplement_init()
</script>
{% endblock %}

