{% extends "layout.html" %}

{% block content %}  
  <div class="row">
    <h1 style="margin-bottom:10px"><strong>{{sesion.sesion}}</strong></h1>
      <p style="font-size:15px;"><b>Organizadores: </b><span>{{sesion.organizadores|map(o=>"#{o.nombre}#{o.mail?' (' ~ o.mail ~ ')'}")|join(', ')}}</span></p>
      <div class="col-xs-12">
      <div class="tab-content sesiones-page">
      {% set count=0 %}
      {% for pagina in sesiones %}       
      <section class="{{ loop.index == 1 ? 'in active' }} tab-pane fade" id="pagina{{loop.index}}">
        {% for s in pagina %}
        {% set count = count+1 %}
          <div class="media">
            <div class="media-left media-middle">
             <h5>{{count}}</h5>
            </div>
            <div class="media-body">
              <h4 class="media-heading">{{s.sesion}}</h4>
              <div><b>Organizadores: </b><span>{{s.organizadores|map(o=>"#{o.nombre}#{o.mail?' (' ~ o.mail ~ ')'}")|join(', ')}}</span></div>              
              <div>
                <b><a role="button" data-toggle="collapse" href="#collapse{{count}}"}}>Charlas<span class="caret"></span></a> </b>
                <ul id="collapse{{count}}" class="collapse">
                  {% for charla in s.charlas %}
                  <li><b>{{charla.titulo}}</b><br/>{{charla.speaker}}</li>
                  {% endfor %}
                </ul>
              </div>                           
            </div>
          </div>       
        {% endfor %}
      </section>
      {% endfor %}
    </div>
      <nav aria-label="Page navigation">
          <ul class="pagination pagination-lg nav" role="tablist">
            {% for pagina in sesiones %}
              <li class="{{ loop.index == 1 ? 'active' }}"><a data-toggle="tab" href="#pagina{{loop.index}}">{{loop.index}}</a></li>
            {% endfor %}           
          </ul>
        </nav>
   
      </div>
    </div>
{% endblock %}