{% extends "layout.html" %}

{% block content %}  
  <div class="row">
    <h1 style="margin-bottom:10px;display:inline;"><strong>{{sesion.sesion}}</strong></h1>
    {% if sesion.zoom %}
      <a style="display:inline;vertical-align:bottom; margin-left:5px;" href={{sesion.zoom}}><img width=40 src="/img/zoom-ico.png" /></a>
    {% endif %}
    <p style="font-size:15px;margin:10px 0px;"><b>Organizadores: </b><span>{{sesion.organizadores|map(o=>"#{o.nombre}#{o.mail?' (' ~ o.mail ~ ')'}")|join(', ')}}</span></p>
      
      <div class="col-xs-12">        
        
        
        <!--<p style="font-size:15px;"><b>Charlas:</b></p>-->
        <ul class="media-list">
          {% for when in charlas|keys %}
          <li class="media">            
            <div class="media-body">
              <h4 class="media-heading">{{when}}</h4>
              {% for charla in charlas[when] %}
              {% set start = charla.start is empty ? "TBA" : charla.start|date("H:i") %}
              {% set end = charla.end is empty ? "TBA" : charla.end|date("H:i") %}
              <div class="media">
                <div class="media-left media-top">
                  <span style="display:block;width:90px;">{{start}} - {{end}}</span>
                </div>
                <div class="media-body">                      
                  <h4 style="margin-bottom:10px;" class="media-heading">{{charla.titulo|default('Título:')|raw}}</h4>
                  <b>{{charla.speaker}}</b><br/>                      
                  <!--<span><b>Inicio: </b>{{start}}  <b>Fin: </b>{{end}} (America/Montevideo)</span><br/>-->
                  <!--<b><a role="button" data-toggle="collapse" href="#collapse{{when}}{{loop.index}}"}}>Abstract<span class="caret"></span></a> </b>-->
                  <div style="padding-top:10px;" id="collapse{{charla.start|date('U')}}"class="collapse abstract">{{charla.abstract|default('Resumen')|raw}}</div>
                </div>
                <div class="media-right media-top">
                  <b><a role="button" class="btn btn-lg btn-default" data-toggle="collapse" href="#collapse{{charla.start|date('U')}}"}}><span class="caret"></span></a> </b>
                </div>
              </div>                     
              {% endfor %}
            </div>            
          </li>               
        {% endfor %}
        </ul>
        
        
     <!-- <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 %}