{% extends "base_title.html" %}

{% block realcontent %}
    <h2>{{ spectacle }}</h2>
    <h3><a href="{% url "admin:bda_attribution_add" %}?spectacle={{spectacle.id}}">Ajouter une attribution</a></h3>
      <table class='etat-bda' align="center">
        <thead>
          <tr>
          <th>Nom</th>
          <th>Identifiant</th>
          <th>Places</th>
          <th>Adresse Mail</th>
          <th>Payé</th>
          <th>Donné</th>
          </tr>
        </thead> 
        {% for participant in participants %}
        <tr>
          <td>{{participant.name}}</td>
          <td>{{participant.username}}</td>
          <td>{{participant.nb_places}} place{{participant.nb_places|pluralize}}</td>
          <td>{{participant.email}}</td>
          <td>
            <div class={%if participant.paid %}"greenratio"{%else%}"redratio"{%endif%}>
            {% if participant.paid %}Oui{% else %}Non{%endif%}
            </div>
          </td>
          <td align="center">
            <div class={%if participant.given == participant.nb_places %}"greenratio"
                        {%elif participant.given == 0%}"redratio"
                        {%else%}"orangeratio"
                        {%endif%}>
            {% if participant.given == participant.nb_places %}Oui
            {% elif participant.given == 0 %}Non
            {% else %}{{participant.given}}/{{participant.nb_places}}
            {%endif%}
            </div>
          </td>
        </tr>
        {% endfor %}
      </table>
      <br>
     <button type="button" onclick="toggle('export-mails')">Afficher/Cacher mails participants</button>
      <pre id="export-mails" style="display:none">
{%for participant in participants %}{{participant.email}}, {%endfor%}
      </pre>
      <br>
      <button type="button" onclick="toggle('export-salle')">Afficher/Cacher liste noms</button>
      <pre id="export-salle" style="display:none">
{% for participant in participants %}{{participant.name}} : {{participant.nb_places}} places
{% endfor %}
      </pre>

<script>
function toggle(id) {
    var pre = document.getElementById(id) ;
    pre.style.display = pre.style.display == "none" ? "block" : "none" ;
}
</script>
 
{% endblock %}