{% extends "front/front_base.html" %}
{% load i18n %}
{% load thumbnail %}
{% load front_tags %}

{% block title %}Lignes de temps : {% trans 'search' %} "{{search}}" {% endblock %}

{% block js_import %}
{{block.super}}
<script src="{{LDT_MEDIA_PREFIX}}js/jquery.min.js" type="text/javascript"/></script>
<script src="{{LDT_MEDIA_PREFIX}}js/raphael.js" type="text/javascript"/></script>
{% endblock %}

{% block css_import %}
{{block.super}}
<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/front_search.css" type="text/css"/>
{% endblock %}

{% block body %}
{{block.super}}
<script type="text/javascript">
    var _medias = [ {% for res in results.object_list %}
        {
            "iri_id" : '{{ res.content.iri_id }}',
            "duration" : {{ res.content.duration }},
            "segments" : [ {% for segment in res.list %}
                {
                    "id" : '{{segment.element_id}}',
                    "begin" : {{segment.start_ts}},
                    "duration" : {{segment.duration}},
                },{% endfor %}
            ],
            "stats" : [{{ res.content.stat_annotation }}],
        },{% endfor %}
    ];
    
    var global_csrf_token = "{{ csrf_token }}";
    
</script>
<script src="{{LDT_MEDIA_PREFIX}}js/Ldt_front_search_results.js" type="text/javascript"></script>

{% if msg %}
{{ msg }}
{% else %}
  {% ifequal nb_results 0 %}
    {% blocktrans %} No results for <b>{{ search }}</b>.{% endblocktrans %}
  {% else %}
<!-- TABLE POUR ALIGNER À LA VERTICALE -->
    <table id="tbl_rech">
    <tr>
<!-- LISTE DES RÉSULTATS -->
        <td>
        <ul class="floatlist" id="liste_resultats">
    <!-- titre "Résultats de recherche" et options -->
            <li id="li_haut_resultats">
                <ul class="floatlist" id="ul_haut_resultats">
                    <li id="title_resultats">
                        <h2>{% trans "Search results for " %} <b> {{ search }}</b></h2>
                    </li>
                    <li id="li_nb_resultats">
                        <p id="p_nb_resultats">{{ nb_results }} {% trans "Result" %}{{ nb_results|pluralize }}</p>
                    </li>
                    <!--li id="resultats_options">options</li-->
                </ul>
            </li>
    <!-- Médias trouvés -->
    
        <!-- Média -->
        {% autoescape off %}
        {% for res in results.object_list %}
            <li class="li_result_media">
                <div class="titre_result_media">
                    <div class="h3_result_media">
                        <h3>{% if res.content.title|length > 20 %}{{res.content.title|capfirst|slice:"20"}}...{% else %}{{res.content.title}}{% endif %}</h3>
                    </div>
                    <div class="duree_result_media">
                        <p>{{res.content.duration|str_duration:"::" }}</p>  
                    </div>
                    <div class="graphe_result_media">
                    	<span id="{{ res.content.iri_id }}" class="graph_annotation" title="{% trans 'annotation distribution' %}">
                    	</span>
                    </div>
                </div>        
        
            <!-- Segments du média -->
                <ul class="floatlist list_segments">
                {% for segment in res.list %}
                    <li class="li_segment" id="li_{{segment.element_id}}">
                        <div class="left_segment">
                            <div class="color_zone"></div>
                            <a href="{% url ldt.ldt_utils.views.front.annot_content segment.iri_id segment.project_id segment.cutting_id %}#id={{segment.element_id}}"><img src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" alt="" /></a>
                            <!--p class="duree_segment">{{ segment.duration|str_duration:"::" }}</p-->
                        </div>
                        <h4 class="title_segment"><a class="blue under" href="{% url ldt.ldt_utils.views.front.annot_content segment.iri_id segment.project_id segment.cutting_id %}#id={{segment.element_id}}" title="{% trans 'view this annotation in the player' %}">
                          {% if segment.title %}{{ segment.title }}{% else %}{% trans "No title" %}{% endif %}</a></h4>
                        <p class="text_segment">{% if segment.context %}{{ segment.context }}{% endif %}<br/>{% trans "Begin" %} : {{ segment.start_ts|str_duration:"::" }} - {% trans "duration" %} : {{ segment.duration|str_duration:"::" }}</p>
                        <div class="hidden_preview">
                            {% thumbnail res.content.image "300x200" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" %}">{% endthumbnail %}
                            <h4><a class="pink under b" href="{% url ldt.ldt_utils.views.front.annot_content segment.iri_id segment.project_id segment.cutting_id %}#id={{segment.element_id}}" title="{% trans 'view this annotation in the player' %}">
                            {% if segment.title %}{{ segment.title }}{% else %}{% trans "No title" %}{% endif %}</a></h4>
                            <p class="bigmargin">{{ segment.abstract }}</p>
                            <h5>Tags:</h5>
                            <p class="result_taglist b fl">{{ segment.tags }}</p>
                        </div>
                    </li>
                {% endfor %}
                </ul>
            </li>
      {% endfor %}
      {% endautoescape %}
      <!-- Fin des médias -->
      <!-- Pagination -->
        <li id="result_pagination">
            <p>
            {% if results.has_previous %}
	            <a class="blue under" href="{% url ldt.ldt_utils.views.front.search_listing %}?page={{ results.previous_page_number }}" title="{% trans 'previous' %}">{% trans "previous" %}</a>
	            .
	        {% endif %}
	        {% if results.paginator.num_pages > 1 %}
	        <span class="current">
	            {% for i in results.paginator.num_pages|get_range %}
	            <span class="current">
	                {% if i|add:'1' == results.number %}
	                <span class="pink">{{i|add:'1'}}</span>
	                {% else %}
	                <a class="blue under" href="{% url ldt.ldt_utils.views.front.search_listing %}?page={{i|add:'1'}}">{{i|add:'1'}}</a>
	                {% endif %}
	                {% if i|add:'1' < results.paginator.num_pages and 1 < results.paginator.num_pages %}
                    {% endif %}
	            </span>
	            {% endfor %}
	        </span>
	        {% endif %}
	        {% if results.has_next %}
	           
	            <a class="blue under" href="{% url ldt.ldt_utils.views.front.search_listing %}?page={{ results.next_page_number }}" title="{% trans 'next' %}">{% trans "next" %}</a>
	        {% endif %}
            </p>
        </li>
      <!-- Fin Pagination -->
      </ul>
    

<!-- Right column -->
<!-- APERÇU DU RÉSULTAT -->
    <td id="result_preview">
        
    </td>
  </tr>
</table>

  {% endifequal %}
{% endif %}

{% endblock %}