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


{% block title %}Lignes de temps : Home{% endblock %}

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

{% block body %}
{{block.super}}
<!-- Last annotated contents -->
<ul class="floatlist full_width" id="derniers_medias">
    <li class="li_h2">
        <h2>{% trans 'Last annotated medias' %}</h2>
    </li>
    {% for content in last_contents %}
    <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 %}</a>
        <div class="bulle_annot">{{ content.nb_annotation }}</div>
        <p><a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}"><b>{{content.title}}</b></a></p>
        <p>{% trans 'by' %} IRI | {{content.duration|str_duration:"h"}}</p>
    </li>
    {% endfor %}
</ul>
<!-- Most annotated contents -->
<ul class="floatlist" id="plus_annotes">
    <li class="li_h2">
        <h2>{% trans 'Most annotated medias' %}</h2>
    </li>
    {% for content in most_contents %}
    <li class="li_media">
        <a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">{% thumbnail content.image "134x75" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}">{% endthumbnail %}</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 class="font_11">{% trans 'by' %} IRI | {{content.duration|str_duration:"h"}}</p>
    </li>
    {% endfor %}
</ul>
<!-- Active groups -->
<ul class="floatlist" id="groupes_actifs">
    <li class="li_h2">
        <h2>{% trans 'Active groups' %}</h2>
    </li>
    {% for group in active_groups %}
    <li class="li_media">
        <div class="img_groupes_actifs">
            <a href="{% url ldt.ldt_utils.views.front.group_info group.id %}">{% thumbnail group.profile.image "54x40" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}">{% endthumbnail %}</a>
        </div>
        <div class="txt_groupes_actifs">
            <div class="bulle_people">{{ group.user_set.count }}</div>
            <div class="bulle_annot">32</div>
            <p><a href="{% url ldt.ldt_utils.views.front.group_info group.id %}" class="under"><b>{{group.name}}</b></a></p>
            <p>{% if group.profile.description|length > 69 %}{{group.profile.description|safe|slice:":69"}}...{% else %}{{group.profile.description|safe}}{% endif %}</p>
        </div>
    </li>
    {% endfor %}
</ul>
{% endblock %}