{% extends "layout.html" %}

{% block content %}
  <div class="row">
    <h1 style="margin-bottom:20px;"><strong>Conferencias</strong></h1>
      <div class="col-xs-12">
        <div id="charlas">
          <ul class="nav nav-tabs">
            {% for categoria in charlas %}
              {% set categoria = categoria.categoria %}
              <li class="{{ loop.index == 1 ? 'active' }}"><a data-toggle="tab" href="#{{categoria}}">{{categoria}}</a></li>
            {% endfor %}
          </ul>
          <div class="tab-content" style="margin-top:20px;">
            {% for lista in charlas %}
              {% set categoria = lista.categoria %}
              <section class="{{ loop.index == 1 ? 'in active' }} tab-pane fade" id="{{categoria}}">
                {% for charla in lista.charlas|sort( (a,b) => a.speaker.nombre|split(' ')[1]<=> b.speaker.nombre|split(' ')[1] ) %}
                <div class="media"> 
                    <div class="media-body">
                      <h4 style="margin-bottom:10px;" class="media-heading">{{charla.titulo|default('Título:')}}</h4>
                      
                       <div><a href={{charla.zoom}}>({{charla.cuando}}) <img width=20 src="/img/zoom-ico.png" /></a></div>
                      {% if charla.speaker.web %}<a  target="_blank" rel="noopener noreferrer" href="{{charla.speaker.web}}">{% endif %}
                        <b><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{"  "~charla.speaker.nombre}}{{" - "~charla.speaker.afiliacion|default('')}}</b>
                      {{ charla.speaker.web ? '</a>':"" }}<br/>
                      <b><a role="button" data-toggle="collapse" href="#collapse{{categoria}}{{loop.index}}"}}>Abstract<span class="caret"></span></a> </b>
                      <div id="collapse{{categoria}}{{loop.index}}"class="collapse abstract">{{charla.abstract|raw}}</div>
                      
                    </div>
                    
                  </div>                         
                {% endfor %}
              </section>
            {% endfor %}
          </div>
        </div>
      </div>
      
    </div>
{% endblock %}