{% load static %}
{% load front_tags %}
{% load spel_tags %}
<div class="row">
  <div class="col-md-8">
	<ul class="list-inline chapter-tag-list">
	    {% if start_date != "" or end_date != "" %}<li class="small searched-tag date">
	      {% if start_date != "" %}{{ start_date }} &le; {% endif %}date{% if end_date != "" %} &le; {{ end_date }}{% endif %}
	      <span class="glyphicon glyphicon-remove small"></span></li>
	    {% endif %}
	    {% for t in annot_types %}<li class="small searched-tag type">{{ t|remove_tag_key }} <span class="glyphicon glyphicon-remove small"></span></li>{% endfor %}
	    {% for t in mod_scen %}<li class="small searched-tag modscen">{{ t|remove_tag_key }} <span class="glyphicon glyphicon-remove small"></span></li>{% endfor %}
	    {% for t in perso %}<li class="small searched-tag perso">{{ t|remove_tag_key }} <span class="glyphicon glyphicon-remove small"></span></li>{% endfor %}
	    {% for t in type_travail %}<li class="small searched-tag type-travail">{{ t|remove_tag_key }} <span class="glyphicon glyphicon-remove small"></span></li>{% endfor %}
	    {% for t in acte %}<li class="small searched-tag acte">{{ t|remove_opera }} <span class="glyphicon glyphicon-remove small"></span></li>{% endfor %}
	    {% for t in scene %}<li class="small searched-tag scene">{{ t|remove_opera }} <span class="glyphicon glyphicon-remove small"></span></li>{% endfor %}
	  {% if mesure|length > 1 %}
	    <li class="small searched-tag mesure">{{ mesure|first }} &le; mesure  &le; {{ mesure|last }} <span class="glyphicon glyphicon-remove small"></span></li>
	  {% else %}
	    {% for t in mesure %}<li class="small searched-tag mesure">mesure: {{ t }} <span class="glyphicon glyphicon-remove small"></span></li>{% endfor %}
	  {% endif %}
	</ul>
    <p>{{ segments|length }} segment(s) trouvé(s)</p>
  </div>
</div>
<table class="table table-striped table-condensed tablesorter">
    <thead>
        <tr><th>Type</th><th class="title">Titre de la vidéo</th><th>Modalités scéniques</th><th>Personnages</th><th>Type travail</th><th>Acte</th><th>Scène</th><th>Mesure</th><th class="poptime">&nbsp;</th></tr>
    </thead>
    <tbody>
  {% for s in segments %}
    <tr class="chapter-data" data-content="{{ s.iri_id }}" data-start="{{ s.start_ts }}" data-end="{{ s.start_ts|add:s.duration }}">
        <td title="{{ s.cutting_id }}">{{ s.cutting_id|slice:":1"|upper }}</td>
        <td>{% if annot_chapters %}{{ s.ct }}{% else %}{{ s.content.title }}{% endif %}</td>
        <td>{{ s.tags|get_tags:"opera_modalites_sceniques"|join:', ' }}</td>
        <td>{{ s.tags|get_tags:"opera_personnages"|join:', ' }}</td>
        <td>{{ s.tags|get_tags:"opera_type_travail"|join:', ' }}</td>
        <td>{{ s.tags|get_tags:"opera_acte"|join:', ' }}</td>
        <td>{{ s.tags|get_tags:"opera_scene"|join:', ' }}</td>
        <td>{{ s.tags|get_tags:"opera_mesure"|join:', ' }}</td>
        <td>
          <span class="glyphicon glyphicon-time popinfo" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="auto" 
                  data-content="<strong>Timecodes:</strong> {{ s.start_ts|str_duration }} - {{ s.start_ts|add:s.duration|str_duration }}"></span>
          <a class="play-button" href="{% url 'spel_player' %}?g={{ s.iri_id }}&d=opera&f=720p.mp4#id={{ s.element_id }}" target="_blank"><span class="glyphicon glyphicon-play"></span></a>
        </td>
    </tr>
  {% endfor %}
    <tbody>
</table>