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

{% block title %}Lignes de temps : groupe "{{group.name}}"{% 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/jquery.sparkline.min.js" type="text/javascript"/></script>
{% endblock %}

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

{% block js_declaration %}
{{block.super}}
<script type="text/javascript">
    $(document).ready(function () {
        // We draw the annotation volume for each content
        /* Use 'html' instead of an array of values to pass options 
        to a sparkline with data in the tag */
        $('.graph_annotation').sparkline('html', {width: '293px',
                                                  height:'20px',
                                                  minSpotColor: false,
                                                  maxSpotColor: false,
                                                  spotColor: false,
                                                  lineWidth: '0px',
                                                  fillColor: '#adadad',
                                                  lineColor: '#adadad'});
    });
</script>

{% endblock %}

{% block body %}
{{block.super}}
<!-- Last annotated contents -->
<ul class="floatlist full_width" id="derniers_medias">
    <li class="li_h2">
        <h2>{% trans 'All medias' %}</h2>
    </li>
    {% for content in content_list %}
    <li class="li_media">
        <a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">{% thumbnail content.image "294x165" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}">{% endthumbnail %}
        <span class="graph_annotation">{{ content.stat_annotation }}</span></a>
        <div class="bulle_annot">{{ content.nb_annotation }}</div>
        <p><a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}"><b>{% if content.title|length > 69 %}{{content.title|slice:":69"}}...{% else %}{{content.title}}{% endif %}</b></a></p>
        <p>{% trans 'by' %} IRI | {{content.duration|str_duration:"h"}}</p>
    </li>
    {% endfor %}
</ul>
{% endblock %}

