{% extends "layout.html" %}

{% block content %}
  <div class="row">
    <h1 style="margin-bottom:20px"><strong>Sesiones</strong></h1>
      <!--<h2>Scientific Committee</h2>-->
      <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.titulo}}</h4>
              <b>Speakers: </b>{{s.speakers|join(', ')}}
            </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 %}