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

{% block contents %}
    <h1>Livres supplémentaires à emprunter, par un groupe d'élèves</h1>
    <div class="padded-boxes twice">
      <section>
	<h3 class="heading">Mode d'emploi</h3>
	<div class="padded">
	  <ul>
	    <li>je donne mon nom,</li>
	    <li>je choisis le ou les livres supplémentaires,</li>
	    <li>je désigne les élèves qui devront emprunter ces livres ;</li>
	    <li>Quand c'est fait, Je valide.</li>
	  </ul>
	</div>
      </section>
    </div>
    <div class="padded-boxes">
      <section class="rightalign">
	<div class="padded">
	  <label for="nomprenom">Je m'appelle :</label>
	</div>
      </section>
      <section>
	<div class="padded">
	  <input id="prof" type="text" placeholder="Nom Prénom"/>
	</div>
      </section>
    </div>
    <div class="padded-boxes">
      <section class="rightalign">
	<div class="padded">
	  <label for="titre">J'ajoute un livre à prêter :</label>
	</div>
      </section>
      <section>
	<div class="padded">
	   <input id="titre" type="text"
		  placeholder="Quelques caractères du titre ..." />
	</div>
      </section>
    </div>
    <div id="les-livres" class="padded-boxes twice" style="display: none;">
      <section>
	<h3 class="heading">Liste de livres</h3>
	<div class="padded plus"></div>
      </section>
    </div>
    <div class="padded-boxes">
      <section class="rightalign">
	<div class="padded">
	  <label for="nomprenom">J'ajoute un élève :</label>
	</div>
      </section>
      <section>
	<div class="padded">
	   <input id="nomprenom" type="text"
		  placeholder="Quelques caractères du nom ou du prénom ..." />
	</div>
      </section>
    </div>
    <div id="les-eleves" class="padded-boxes twice" style="display: none;">
      <section>
	<h3 class="heading">Liste d'élèves</h3>
	<div class="padded plus"></div>
      </section>
    </div>
    <div class="padded-boxes twice">
      <section id="commentaire">
	<h3 class="heading">Validation</h3>
	<div class="padded" style="text-align: center;">
	  <textarea rows="3" cols="50" placeholder="Un bref commentaire (en option) ..."></textarea>
	  <br>
	  <button onclick="livre_supplement_go()">
	    <span style="font-size: 140%;">
	      Je valide les données ci-dessus
	    </span>
	  </button>
	</div>
      </section>
    </div>
    <p>
      N.B. : Merci de poster un message, par exemple via
      <a href="https://pronote.lyceejeanbart.fr" target="other">Pronote</a>, à 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 %}
