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

{% block title %}Lignes de temps : groupe "{{group.name}}"{% endblock %}

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

{% block js_declaration %}
{{block.super}}
{% endblock %}

{% block body %}
{{block.super}}
<!-- Medias annotated by the group -->
<ul class="floatlist" id="medias_groupe">
    <li class="li_h2">
        <h2>{% trans 'Medias annotated by the group' %}&nbsp;{{group.name}}</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 "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="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 %}" 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>

<!-- Right column -->
<div id="groupe_droite">
  <!-- About the group -->
	<div class="li_h2">
	    <h2>{% trans 'About the group' %}</h2>
	</div>
	<p class="bigmargin">
	   {{group.get_profile.description|safe}}
	</p>
	{% 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="{{content.title}}" title="{{group.name}}" alt="{{group.name}}">{% endthumbnail %}
	<p class="clear">&nbsp;</p>
  <!-- MEMBERS -->      
	<div class="li_h2">
	    <h2>{% trans 'Members' %} <span class="pink">({{users|length}})</span></h2>
	</div>
	<ul class="floatlist" id="membres_groupes">
	    {% for user in users %}
	    <li class="li_membre_groupe">
	      {% thumbnail user.get_profile.image "36x36" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" title="{{user.username}}" alt="{{user.username}}">{% endthumbnail %}
	      <p><b>{{user.username}}</b></p>
	      <p class="font_11">{% trans 'active since' %} {{user.date_joined|date:"Y/m/d"}}</p>
	    </li>
	    {% endfor %}
	</ul>
</div>
{% endblock %}