{% extends "egonomy_base.html" %}

{% load static %}

{% load i18n %}

{% load thumbnail %}

{% load egonomy_thumbnail %}

{% block title %}{% trans "View a fragment" %}{% endblock %}

{% block content %}

                <div class="fullwidth">

                    <div class="column column-half">

                        <h2>{{ fragment.title }}</h2>

                        <div class="center-image">

	                        <div class="image-and-fragment">

	                          {% with fragment.image.info.image_file as image %}

	                          {% if image|ratio > 0.8 %}

	                           {% thumbnail image "476" format="PNG" crop="center" as im %}

	                           {% empty %}

	                           {% endthumbnail %}

	                          {% else %}

	                           {% thumbnail image "x600" format="PNG" crop="center" as im %}

	                           {% empty %}

	                           {% endthumbnail %}

	                          {% endif %}

	                          {% endwith %}

	                                <path d="{{ fragment.coordinates }}" stroke="red" stroke-width=".002" fill="red" fill-opacity=".3" />

	                        </div>

	                    </div>

                    </div>

                    <div class="column column-half">

                        <form action="#">

                            <table class="image-metadata">

                                <tr>

                                    <th>{% trans "Source picture" %}&nbsp;:</th>

                                    <td><a href="{% url 'annotate_picture' image_id=fragment.image.id %}">{{ fragment.image.metadata.titre|default:_("No title") }}</a></td>

                                </tr>

                                <tr>

                                    <th>{% trans "Fragment's description" %}&nbsp;:</th>

                                    <td>{{ fragment.description }}</td>

                                </tr>

                                <tr>

                                    <th>{% trans "Users keywords" %}</th>

                                    <td>{{ fragment.tags }}</td>

                                </tr>

                                <tr>

                                    <th>{% trans "Last modification" %}&nbsp;:</th>

                                    <td>{{ fragment.date_saved }} {% trans 'by' %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></td>

                                </tr>

                                {% ifequal user fragment.author %}

                                <tr>

                                    <th>&nbsp;</th>

                                    <td><a href="{% url 'create_fragment' image_id=fragment.image.id fragment_pk=fragment.pk %}" class="big-button">{% trans "Modify this fragment" %}</a></td>

                                </tr>

                                {% endifequal %}

                            </table>

                        </form>

                        <div class="fullwidth">

                            <a href="{% url 'create_fragment' image_id=fragment.image.id %}" class="big-button">{% trans "Create a fragment" %}</a>

                        </div>

                    </div>

                </div>

                <div class="fullwidth">

                    <div class="column column-full">

                        <h2>{% trans "Fragments from this picture" %}</h2>

                        <ul class="fullwidth">

                          {% for frg in fragment_list %}

                            <li class="subcol subcol-eighth">

                                <a href="{% url 'view_fragment' fragment_pk=frg.pk  %}">

                                <div class="center-image">

                                    <div class="image-and-fragment">

                                     {% with frg.image.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 %}

                                        <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>

                                <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=frg.author %}">{{ frg.author }}</a></strong></p>

                            </li>

                          {% endfor %}

                        </ul>

                    </div>

                </div>

{% endblock %}