{% 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.user.get_full_name}}</td>
          <td>{{participant.user.username}}</td>
          <td>{{participant.nb_places}} place{{participant.nb_places|pluralize:",s"}}</td>
          <td>{{participant.user.email}}</td>
          <td>
            <div class={%if participant.paid %}"greenratio"{%else%}"redratio"{%endif%}>
            {{participant.paid|oui_ou_non}}
            </div>
          </td>
          <td align="center">
            <div class={%if participant.given %}"greenratio"{%else%}"redratio"{%endif%}>
            {{participant.given|oui_ou_non}}
            </div>
          </td>
          
        </tr>
        {% endfor %}
     <button type="button" onclick="toggle('export-mails')">Afficher/Cacher mails participants</button>
      <pre id="export-mails" style="display:none">
{%for participant in participants %}{{participant.user.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.user.get_full_name}} {% if participant.nb_places == 2 %}
{{participant.user.get_full_name}}{%endif%}
{% endfor %}
      </pre>

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