{% extends "base_title.html" %}
{% load utils %}

{% block realcontent %}
    <h2>{{ spectacle }}</h2>
      <table class='etat-bda' align="center">
        <thead>
          <tr>
          <th>Nom</th>
          <th>Clipper</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:",s"}}</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 %}"greenratio"{%else%}"redratio"{%endif%}>
            {% if participant.given %}Oui{% else %}Non{%endif%}
            </div>
          </td>
          
        </tr>
        {% endfor %}
      </table>
     <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>
{% spaceless %}
      <pre id="export-salle" style="display:none">
{% for participant in participants %}{{participant.name}}{% if participant.nb_places == 2 %}
{{participant.name}}{%endif%}
{% endfor %}
      </pre>
{%endspaceless%}

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