{% extends "egonomy_base.html" %}
{% load static %}
{% load i18n %}
{% load thumbnail %}

{% block title %}{% trans "Home" %}{% endblock %}

{% block content %}
            {% if search %}
                <div class="fullwidth">
                  {% ifequal nb_results 0 %}
                    <h2>{% trans "No results for" %} &laquo;&nbsp;{{ search }}&nbsp;&raquo;&nbsp;</h2>
                  {% else %}
                    <h2>{% trans "Search results for" %} &laquo;&nbsp;{{ search }}&nbsp;&raquo;&nbsp;:</h2>
                  {% endifequal %}
                </div>
            {% endif %}
                <div class="fullwidth">
                
                    <!-- Liste des dernières images annotées -->
                    <div class="column column-half">
                        <h2>{% if search %}{% trans "Corresponding pictures" %}{% else %}{% trans "Last annotated pictures" %}{% endif %}
                            <span class="right"><a href="{% url 'all_pictures' %}" alt="{% trans "All pictures" %}">{% trans "All pictures" %}</a></span></h2>
                        <ul class="fullwidth">
                          {% for img in img_list %}
                            <li class="subcol subcol-half-fourth">
                                <a href="{% url 'annotate_picture' image_id=img.id %}">
                                <div class="center-image">
                                 {% with img.info.image_file as image %}
                                 {% if image %}
                                  {% if image|is_portrait %}
							 	    {% thumbnail image "x110" format="PNG" crop="center" as im %}
	                                  <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
	                                {% empty %}
	                                  <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="110" class="placeholder" />
	                                {% endthumbnail %}
	                              {% else %}
                                    {% thumbnail image "110" format="PNG" crop="center" as im %}
                                      <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
                                    {% empty %}
                                      <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
                                    {% endthumbnail %}
	                              {% endif %}
	                             {% else %}
	                                  <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
	                             {% endif %}
	                             {% endwith %}
                                </div>
                                <h3>{{ img.metadata.titre }} : {{img.date_modif}}</h3></a>
                                <p>{% trans "Annotated by" %} <strong>{{ img.metadata.auteur }}</strong></p>
                            </li>
                          {% endfor %}
                        </ul>
                    </div>
                    
                    <!-- Liste des derniers fragments modifiés -->
                    <div class="column column-half">
                        <h2>{% if search %}{% trans "Corresponding fragments" %}{% else %}{% trans "Last created fragments" %}{% endif %}
                            <span class="right"><a href="{% url 'all_fragments' %}" alt="{% trans "All fragments" %}">{% trans "All fragments" %}</a></span></h2>
                        <ul class="fullwidth">
                          {% for frg in fragment_list %}
                            <li class="subcol subcol-half-fourth">
                                <a href="{% url 'view_fragment' fragment_pk=frg.pk %}">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                     {% if frg.image %}
                                      {% with frg.image.info.image_file as image %}
		                              {% if image|is_portrait %}
		                               {% thumbnail image "x110" format="PNG" crop="center" as im %}
		                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
		                               {% empty %}
		                                <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="110" class="placeholder" />
		                               {% endthumbnail %}
		                              {% else %}
		                               {% thumbnail image "110" format="PNG" crop="center" as im %}
		                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
		                               {% empty %}
		                                <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
		                               {% endthumbnail %}
		                              {% endif %}
		                              {% endwith %}
		                             {% else %}
		                                <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
		                             {% endif %}
                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
                                            <path d="{{ frg.coordinates }}" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
                                        </svg>
                                    </div>
                                </div>
                                <h3>{{ frg.title }}</h3></a>
                                <h4>{% trans "Fragment from" %} <a href="{% url 'annotate_picture' image_id=frg.image.id %}">{{ frg.image.metadata.titre }}</a></h4>
                                <p>{% trans "Annotated by" %} <strong>{{ frg.author }}</strong></p>
                            </li>
                          {% endfor %}
                        </ul>
                    </div>
                </div>
{% endblock %}

