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

{% block title %}{% trans "Annotate a picture" %}{% endblock %}

{% block content %}
                <div class="fullwidth">
                    <div class="column column-half">
                        <h2>{% if img.metadata.titre %}{{ img.metadata.titre }}{% else %}({% trans "No title" %}){% endif %}</h2>
                        <div class="fullphoto">
                          {% with img.info.image_file as image %}
                          {% thumbnail image "476" 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="476" height="476" class="placeholder" />
                          {% endthumbnail %}
                          {% endwith %}
                        </div>
                    </div>
                    <div class="column column-half">
                        <form action="#">
                        <table class="image-metadata">
                            <tr>
                                <th>{% trans "Description" %}&nbsp;:</th>
                                <td>{% if img.metadata.description %}{{ img.metadata.description }}{% endif %}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Author" %}&nbsp;:</th>
                                <td>{% if img.metadata.auteur %}{{ img.metadata.auteur }}{% endif %}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Period" %}&nbsp;:</th>
                                <td>{% if img.metadata.periode %}{{ img.metadata.periode }}{% endif %}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Production site" %}&nbsp;:</th>
                                <td>{% if img.metadata.site %}{{ img.metadata.site }}{% endif %}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Localization" %}&nbsp;:</th>
                                <td>{% if img.metadata.lieu %}{{ img.metadata.lieu }}{% endif %}</td>
                            </tr>
                            <tr>
                                <th>{% trans "RMN keywords" %}&nbsp;:</th>
                                <td>{% if img.metadata.mots_cles %}{{ img.metadata.mots_cles }}{% endif %}</td>
                            </tr>
                            <!--tr>
                                <th> </th>
                                <td><input class="user-submit" type="submit" value="{% trans 'Save keywords' %}" /></td>
                            </tr-->
                            <tr>
                                <th>{% trans "Last fragment created" %}&nbsp;:</th>
                                <td>{% if last_frg %}<a href="{% url 'view_fragment' fragment_pk=last_frg.pk %}">{{ last_frg.title }}</a>, {{ last_frg.date_saved }} {% trans 'by' %} <strong>{{ last_frg.author }}</strong>{% endif %}</td>
                            </tr>
                        </table>
                        </form>
                        <div class="fullwidth">
                            <a href="{% url 'create_fragment' image_id=img.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>{{ frg.author }}</strong></p>
                            </li>
                          {% endfor %}
                        </ul>
                    </div>
                </div>
{% endblock %}