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

{% block title %}{% trans "front.home" %}{% endblock %}

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

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

{% block js_declaration %}
{{block.super}}
<script type="text/javascript">
    $(document).ready(function () {
    	$("#home_tag_cloud").toggle(false);
    	$("#hide_tag_cloud").toggle(false);
    	$("#show_tag_cloud").toggle(true);
        $("#tag_cloud_link").click(function(){
            $("#home_tag_cloud").slideToggle("fast");
            $("#hide_tag_cloud").toggle();
            $("#show_tag_cloud").toggle();         
        });
    });
</script> 
{% endblock %}

{% block body %}
{{block.super}}
<!-- Last annotated contents -->
{% if front_tags|length > 0 %}<p class="tag_link">{% trans 'Filter the medias by category' %} : {% for t in front_tags %}<a href="{% url 'ldt.ldt_utils.views.front.all_contents' %}?tag={{t}}">{{t}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}</p>{% endif %}
<ul class="floatlist full_width" id="derniers_medias">
    <li class="li_h2">
      <ul class="title_ul">
        <li><h2>{% trans 'Last annotated medias' %}</h2></li>
	    <li class="li_right">
	        <a class="blue" href="{% url 'ldt.ldt_utils.views.front.all_contents' %}" title="{% trans 'view all medias' %}">{% trans 'All medias' %}</a>&nbsp;&nbsp;<span class="tag_link"><a href="#" id="tag_cloud_link" title="{% trans 'Filter the medias' %}"><img id="hide_tag_cloud" src='{% static "ldt/img/little_minus_pink.png" %}' alt="{% trans 'Filter the medias' %}" /><img id="show_tag_cloud" src='{% static "ldt/img/little_plus_pink.png" %}' alt="{% trans 'Filter the medias' %}" />&nbsp;{% trans 'Filter the medias' %}</a></span>
	    </li>
      </ul>
    </li>
    <li class="li_h2" id="home_tag_cloud">
      <form id="media_search" method="GET" action="{% url 'ldt.ldt_utils.views.front.all_contents' %}">
        {% trans 'Search in the medias title' %} : 
        <input id="input_media_title" type="text" name="title"/><input id="search_media_title" type="submit" value=""/>
      </form>
    {% if tag_cloud|length > 0 %}<p class="left tag_link">{% trans 'All categories of medias' %} : {% for t in tag_cloud %}<a href="{% url 'ldt.ldt_utils.views.front.all_contents' %}?tag={{t.name}}">
	  <span style="font-size:{{t.font_size|add:"12"}}px;">{{t.name}}</span></a>{% if not forloop.last %}, {% endif %}{% endfor %}</p>
	{% endif %}
    </li>
    {% for content in last_contents %}
    <li class="li_media">
        <div class="img_and_overlay">
            <a href="{% url 'ldt.ldt_utils.views.front.annot_content' content_iri_id=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 }}" alt="{% trans 'open this media' %}" title="{% trans 'open this media' %}">{% endthumbnail %}
            </a>
            <div class="overlay">
                <ul class="polemics">
                    <li class="pol-negative" style="width:{{content.pol_negative_rate}}%"><span>{{content.pol_negative_rate}}%</span></li>
                    <li class="pol-positive" style="width:{{content.pol_positive_rate}}%"><span>{{content.pol_positive_rate}}%</span></li>
                </ul>
                <span class="graph_annotation" id="sp_{{ content.iri_id }}">{{ content.annotation_volume|list2str }}</span>
            </div>
        </div>
        <div class="bulle_annot" title="{% blocktrans count nb=content.nb_annotations %}{{nb}} annotation on this media{% plural %}{{nb}} annotations on this media{% endblocktrans %}">{{ content.nb_annotations }}</div>
        <p><a href="{% url 'ldt.ldt_utils.views.front.annot_content' content_iri_id=content.iri_id %}" title="{% trans 'open this media' %}"><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">
      <ul class="title_ul">
        <li><h2>{% trans 'Most annotated medias' %}</h2></li>
      </ul>
    </li>
    {% for content in most_contents %}
    <li class="li_media">
        <div class="img_and_overlay">
            <a href="{% url 'ldt.ldt_utils.views.front.annot_content' content_iri_id=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 }}" alt="{% trans 'open this media' %}" title="{% trans 'open this media' %}">{% endthumbnail %}</a>
            <div class="overlay">
                <ul class="polemics">
                    <li class="pol-negative" style="width:{{content.pol_negative_rate}}%"><span>{{content.pol_negative_rate}}%</span></li>
                    <li class="pol-positive" style="width:{{content.pol_positive_rate}}%"><span>{{content.pol_positive_rate}}%</span></li>
                </ul>
            </div>
        </div>
        <div class="bulle_annot" title="{% blocktrans count nb=content.nb_annotations %}{{nb}} annotation on this media{% plural %}{{nb}} annotations on this media{% endblocktrans %}">{{ content.nb_annotations }}</div>
        <p><a href="{% url 'ldt.ldt_utils.views.front.annot_content' content_iri_id=content.iri_id %}" title="{% trans 'open this media' %}"><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><a href="{% url 'ldt.ldt_utils.views.front.group_list' %}">{% trans 'Active groups' %}</a></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=group.id %}">{% thumbnail group.get_profile.image "54x40" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" alt="{% trans 'group picture' %}" title="{% trans 'view more infos on this group'%}">{% endthumbnail %}</a>
        </div>
        <div class="txt_groupes_actifs">
            <div class="bulle_people" title="{% blocktrans count nb=group.nb_users %}{{nb}} user in this group{% plural %}{{nb}} users in this group{% endblocktrans %}">{{ group.nb_users }}</div>
            <p><a href="{% url 'ldt.ldt_utils.views.front.group_info' group_id=group.id %}" class="under" title="{% trans 'view more infos on this group'%}"><b>{{group.name}}</b></a></p>
            <p>{% if group.get_profile.description|striptags|length > 69 %}{{group.get_profile.description|striptags|slice:":69"}}...{% else %}{{group.get_profile.description|striptags}}{% endif %}</p>
        </div>
    </li>
    {% endfor %}
</ul>
{% endblock %}