{% load i18n %}
{% load static %}
<ol>
  {% for e in confusions %}
  <li class="confus" data-id="{{ e.id }}">
    {{ e }}
    <div>
      <dl>
	<dt>{% translate 'Données pour décider' %}</dt>
	<dd>
	  <div class="indices">
	    {{ e.nom_tous_prenoms }}
	  </div>
	  <fieldset>
	    <legend title="{% translate 'Que faire : garder, supprimer ? quel nouvel alias ?' %}">
	      {% translate 'Que faire ?' %}
	    </legend>
	    <div title="{% translate 'Supprimer cet élève' %}"
		 class="fin-confusion{% if e.dus_codes %} desactive{% endif %}">
	      <input type="radio" id="del{{ e.id }}" name="radio{{ e.id }}"
		     data-id="{{ e.id }}"
		     data-action="del"
		     {% if e.dus_codes %}disabled="disabled"{% endif %}
		     onchange="toggleAliasInput(this)"/>
	      <label for="del{{ e.id }}">
		<img alt="{% translate 'Supprimer cet élève' %}"
		     src="{% static 'img/edit-delete.svg' %}"
		     class="mini"/>
	      </label>
	    </div>
	    <div title="{% translate 'Conserver cet élève' %}"
		 class="fin-confusion">
	      <input type="radio" id="save{{ e.id }}" name="radio{{ e.id }}"
		     data-id="{{ e.id }}"
		     data-action="save"
		     onchange="toggleAliasInput(this)"/>
	      <label for="save{{ e.id }}">
		<img alt="{% translate 'Conserver cet élève' %}"
		     src="{% static 'img/document-save.svg' %}"
		     class="mini"/>
	      </label>
	    </div>
	    <div class="fin-confusion">
	      <label for="alias{{ e.id }}">
		{% translate 'Futur alias (modifiable) :' %}
	      </label>
	      <br>
	      <input type="text" name="alias{{ e.id }}" data-id="{{ e.id }}"
		     value="{{ e.NomPrenomEleve }}"
		     class="alias"/>
	    </div>
	  </fieldset>
	</dd>
      </dl>
    </div>
  </li>
  {% endfor %}
</ol>
<button onclick="finDeConfusion()">
  {% translate 'Valider les choix ci-dessus' %}
</button>
<script>
  /**
   * fonction de rappel pour les boutons radio : si on active la suppression,
   * ça désactive le champ d'alias ; si on active l'enregistrement, ça
   * réactive le champ d'alias.
   * @param elt le bouton radio juste cliqué
   **/
  function toggleAliasInput(elt){
      var elt = $(elt)
      var alias = elt.parents("fieldset").first().find("input[type='text']")
      var aliasDiv = alias.parent()
      if (elt.data("action") == "save"){
	  alias.prop("disabled", false)
	  aliasDiv.removeClass("desactive")
      } else {
	  alias.prop("disabled", true)
	  aliasDiv.addClass("desactive")
      }
  }
</script>