{% load static %}
{% if cautions|length == 0 %}
<p>
  {{ eleve.NomPrenomEleve }} n'a pas de numéro de caution dans la base
  de données, mais il en existe probablement un, donné avant la mise en
  place de ce logiciel.
</p>
<fieldset style="border: 1px navy solid; padding: 5px; border-radius: 5px; background: #ffffdd;">
  <legend style="border: 1px navy solid; padding: 5px; border-radius: 40px; background: lightcyan;">Restaurer l'ancien numéro de caution</legend>
  <table>
    <tr>
      <td><label for="numero">Ancien numéro de caution :</label></td>
      <td><input type="text" id="no_caution" name="no_caution" placeholder="12345"/></td>
    </tr>
    <tr>
      <td><label for="date">Date (facultative) :</label></td>
      <td><input type="text" id="date" name="date" placeholder="AAAA-MM-JJ"/></td>
    </tr>
  </table>
  <button onclick="ancienne_caution()">
    Valider
  </button>
</fieldset>
{% else %}
<h3>Cautions gérées pour le compte de « {{ eleve.NomPrenomEleve }} »</h3>

<table class="tableau_prets">
  <tr>
    <th>Caution</th>
    <th>Actions</th>
    <th>Commentaires</th>
  </tr>
  {% for c in cautions %}
  <tr>
    <td>{{ c }}</td>
    <td>
      {% if c.est_valide and c.somme_payee > 0 %}
      <span id="no_caution" style="display: none;">{{ no_caution }}</span>
      <button onclick="annule_caution('{{ eleve.sans_accent }}')">
	<img src="{% static '/img/edit-delete.svg' %}" alt="sans-caution" title="Neutraliser la caution (passer à 0 €)" style="width: 50px;"/>
      </button>
      <button onclick="rend_caution('{{ eleve.sans_accent }}')">
	<img src="{% static '/img/undo.svg' %}" alt="rendre la caution" title="Rendre cette caution pour {{ eleve.NomPrenomEleve }}" style="width: 50px;"/>
      </button>
      {% endif %}
      <button onclick = "edite_caution('{{ eleve.sans_accent }}','{{ c.commentaire_html }}')">
	<img src="{% static '/img/gtk-edit.svg' %}" alt="éditer les commentaires" title="Éditer les commentaires pour cette caution" style="width: 50px;"/>
      </button>
    </td>
    <td>{{ c.commentaire_html }}</td>
  </tr>
  {% endfor %}
</table>
{% endif %}
