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

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

{% block js_import %}
{{block.super}}
<script src='{% static "ldt/js/raphael.js" %}' type="text/javascript"/></script>
{% endblock %}

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

{% block js_declaration %}
{{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}}',
                    "project_id": '{{segment.project_id}}',
                    "ensemble_id": '{{segment.ensemble_id}}',
                    "cutting_id": '{{segment.cutting_id}}',
                    "iri_id": '{{segment.iri_id}}',
                    "begin" : {{segment.start_ts}},
                    "duration" : {{segment.duration}},
                },{% endfor %}
            ],
            "stats" : {{ res.content.annotation_volume }},
        },{% endfor %}
    ];
    
    var global_csrf_token = "{{ csrf_token }}";
    
</script>
<script src='{% static "ldt/js/Ldt_front_search_results.js" %}' type="text/javascript"></script>
{% endblock %}

{% block body %}
{{block.super}}

{% if msg %}
{{ msg }}
{% else %}
  {% ifequal nb_results 0 %}
    {% if tag_label %}
      {% blocktrans %} No results for <b>{{ search }}</b> with the medias tagged <span class="pink">{{tag_label}}</span>{% endblocktrans %}
      <br/><a href="{% url 'ldt.ldt_utils.views.front.search_index' %}?search={{search}}&field={{field}}">{% trans "See for all medias" %}</a>
    {% else %}
      {% blocktrans %} No results for <b>{{ search }}</b>.{% endblocktrans %}
    {% endif %}
  {% 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>
                        {% if tag_label %}
                          <a href="{% url 'ldt.ldt_utils.views.front.search_index' %}?search={{search}}&field={{field}}">{% trans "Search results for " %} <b> {{ search }}</b></a><span class="pink"> &gt; {{tag_label}}</span>
                        {% else %}
                          {% trans "Search results for " %} <b> {{ search }}</b>
                        {% endif %}
                      </h2>
                    </li>
                    <li id="li_nb_resultats">
                        <p id="p_nb_resultats">{{ nb_results }} {% trans "Result" %}{{ nb_results|pluralize }}</p>
                        <p id="p_nb_segments">{{ nb_segment }} {% trans "Segment" %}{{ nb_segment|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>{{res.content.title}}</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.project_id}}_{{segment.iri_id}}_{{segment.ensemble_id}}_{{segment.cutting_id}}_{{segment.element_id}}">
                        <div class="left_segment">
                            <div class="color_zone"></div>
                            <a href="{% url 'ldt.ldt_utils.views.front.annot_content' content_iri_id=segment.iri_id project_id=segment.project_id cutting_id=segment.cutting_id %}#id={{segment.element_id}}"><img src='{% static "ldt/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' content_iri_id=segment.iri_id project_id=segment.project_id cutting_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' content_iri_id=segment.iri_id project_id=segment.project_id cutting_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">{% if segment.context %}{{ segment.context }}{% else %}{{ segment.abstract }}{% endif %}</p>
                            {% if segment.context_tags or segment.tags %}
                            	<h5>Tags:</h5>
                            	<p class="result_taglist b fl">{% if segment.context_tags %}{{ segment.context_tags }}{% else %}{{ segment.tags }}{% endif %}</p>
                            {% endif %}
                        </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_index' %}?page={{ results.previous_page_number }}&search={{search}}&field={{field}}{% if tag_label %}&content_tag={{tag_label}}{% endif %}" 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_index' %}?page={{i|add:'1'}}&search={{search}}&field={{field}}{% if tag_label %}&content_tag={{tag_label}}{% endif %}">{{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_index' %}?page={{ results.next_page_number }}&search={{search}}&field={{field}}{% if tag_label %}&content_tag={{tag_label}}{% endif %}" 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 %}