{% extends "layout.html" %}

{% block content %}
  <div class="row">
    <div class="col-xs-12">
      <h1><strong>Participants</strong></h1>
      <!--<div class="alert alert-info">
        <i class="glyphicon glyphicon-info-sign"></i> <strong>To be announced</strong><br/>      
     </div>-->
     <ul class="nav nav-tabs">
     {% for cat,val in registros %}
      <li class="{{ loop.index == 1 ? 'active' }}"><a data-toggle="tab" href="#{{ loop.index }}">{{cat}}</a></li>
     {% endfor %}
     </ul>
      
      <div class="tab-content">
        {% for cat,val in registros %}
      <section class="{{ loop.index == 1 ? 'in active' }} tab-pane fade" id="{{ loop.index }}">
      <table class="table table-striped" >
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Afiliación</th>
          </tr>
        </thead>
        <tbody>
           {% for reg in val %}
            <tr>
              <td>{{ reg.nombre | title }}</td>
              <td>{{ reg.apellido | title }}</td>
              <td>{{ reg.afiliacion }}</td>
            </tr>
            {% endfor %}
        


        </tbody>
      </table>
      </section>
      {% endfor %}
      </div>
      
 
      </div>

    </div>


{% endblock %}