{% extends 'base.html' %}
{% load i18n %}

{% block title %} - {% trans "Participants" %}{% endblock %}

{% block rss_url %}
<link rel="alternate" type="application/rss+xml"
   title="RSS" href="{{ request.get_full_path}}rss/" />
{% endblock %}

{% block content %}

{% trans "Participants" as ch_title %}
{% with ch_icon="icon-group" ch_title=ch_title ch_bc1=ch_title %}
{% include "layout_elements/category_header.html" %}
{% endwith %}

</div>

<div class="row">
<div class="span6">
  
  <div class="section">
    {% include "info_box/site_category_detail.html" %}
  </div>
  
  {% with ec_class_addon='_main' %}
    {% include "layout_elements/ec_button_group.html" %}
  {% endwith %}
  
  {% for pt in participant_type_list_left %}
  
    <div style="background-color:#f3f3f3;padding:10px;margin-top:15px;margin-bottom: 5px;">
      <div>
      <div style="float:right;">
        <a href="#" style="font-size:18px;color:#000;text-decoration: none;" id="pt_ec_btn_{{ pt.id }}">
          {{ pt.get_participants|length }} <i class="icon-circle-arrow-down"></i></a>
      </div>
      <h4 style="margin:0px;font-weight: normal;">{{ pt }}</h4>
      </div>
    </div>
    
    <div style="display: none;" id="pt_ec_box_{{ pt.id }}" class="ec_box_main">
    {% for group in pt.get_participants %}
      {% with ec_title=group ec_id=group.id ec_url=group.get_absolute_url ec_count=group.to_memberships.count membership_list=group.to_memberships.all ec_box_include="info_box/memberships.html" %}
        {% include "layout_elements/ec_header_box.html" %}
      {% endwith %}
    {% endfor %}
    </div>
    
    <script>
      $(document).ready(function() {    
        $('#pt_ec_btn_{{ pt.id }}').click(function(e) {
          e.preventDefault();
          $('#pt_ec_box_{{ pt.id }}').toggle();
        });  
      });
    </script>
  
  {% endfor %}
  
  
</div>

<div class="span6">
  
  {% if latest_participant_list %}
    {% trans "New Participants" as sh_title %}
    {% with sh_title=sh_title rss_url="rss/" %}
      {% include "layout_elements/section_header.html" %}
    {% endwith %}
    
    <div class="section">
      {% with pd_with_header="yes" %}
      {% for participant in latest_participant_list %}
        <div style="border: 1px solid #ddd;padding:10px;margin-bottom:5px;">
        {% include "info_box/participant_detail.html" %}
        </div>
      {% endfor %}
      {% endwith %}
    </div>
  {% endif %}
  
  {% for pt in participant_type_list_right %}
  
    <div style="background-color:#f3f3f3;padding:10px;margin-top:15px;margin-bottom: 5px;">
      <div>
      <div style="float:right;">
        <a href="#" style="font-size:18px;color:#000;text-decoration: none;" id="pt_ec_btn_{{ pt.id }}">
          {{ pt.get_participants|length }} <i class="icon-circle-arrow-down"></i></a>
      </div>
      <h4 style="margin:0px;font-weight: normal;">{{ pt }}</h4>
      </div>
    </div>
    
    <div style="display: none;" id="pt_ec_box_{{ pt.id }}" class="ec_box_main">
    {% for group in pt.get_participants %}
      {% with ec_title=group ec_id=group.id ec_url=group.get_absolute_url ec_count=group.to_memberships.count membership_list=group.to_memberships.all ec_box_include="info_box/memberships.html" %}
        {% include "layout_elements/ec_header_box.html" %}
      {% endwith %}
    {% endfor %}
    </div>

    <script>
      $(document).ready(function() {    
        $('#pt_ec_btn_{{ pt.id }}').click(function(e) {
          e.preventDefault();
          $('#pt_ec_box_{{ pt.id }}').toggle();
        });  
      });
    </script>
  
  {% endfor %}
  
</div>

{% endblock %}