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

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

{% block popins %}
    <div class="popin-wrap">
        <div id="add-to-collection" class="popin popin-new-collection box-shadow">
            <header>
                <h2>{% trans "Add to the collection" %}</h2>
                <a href="#" class="close-popin"></a>
            </header>
            <section>
                <form action="#">
                    <p>
                        <label for="collection-name">{% trans "Add to" %} :</label>
                        <label class="styled-select">
                            <select>
                                <option selected="" value="/egonomy/allpictures/">Images</option>
                                <option value="/egonomy/allfragments/">Fragments</option>
                            </select>
                        </label>
                    </p>
                    <p>
                        <label class="block" for="image-description">{% trans "Image comment" %} :</label>
                        <textarea name="" id="image-description"></textarea>
                    </p>
                    <div class="buttons">
                        <a href="#" class="btn close-popin">{% trans "Cancel" %}</a>
                        <input class="btn" type="submit" value="{% trans 'Submit' %}">
                    </div>
                </form>
            </section>
        </div>
    </div>
{% endblock %}

{% block content %}
            <div class="title-page">
                <h2>{{ img.metadata.titre|default:_("No title") }}</h2>
            </div>
            <div class="bar-tools clearfix">
                <ul class="clearfix left">
                    <li><a class="go-to mosaic" href="#"></a></li>
                    <li><a class="go-to search" href="#"></a></li>
                </ul>
                <ul class="clearfix">
                    <li>
                        <a class="icon cut" href="{% url 'create_fragment' image_id=img.id %}">{% trans "Create a fragment" %}</a>
                    </li>
                    <li>
                      {% if user.is_authenticated %}
                        <a class="icon plus open-popin" href="#add-to-collection">{% trans "Add to my collection" %}</a>
                      {% else %}
                        <a class="icon plus" href="{% url 'login' %}?next={% url 'annotate_picture' image_id=img.id %}">{% trans "Add to my collection" %}</a>
                      {% endif %}
                    </li>
                    <!--li>
                        <form action="#">
                            <p>
                                <input class="search-form" id="id_search" type="text" placeholder="Romantisme noir">
                            </p>
                        </form>
                    </li-->
                </ul>
            </div>
            <article class="edition">
                <div class="slideshow box-edition">
                    <div class="image-wrap">
                        {% with img.info.image_file as image %}
                        {% if image|is_portrait %}
                         {% thumbnail image "x600" 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="600" height="600" class="placeholder" />
                         {% endthumbnail %}
                        {% else %}
                         {% thumbnail image "600" 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="600" height="600" class="placeholder" />
                         {% endthumbnail %}
                        {% endif %}
                        {% endwith %}
                    </div>
                    <!--div class="arrow-wrap left-arrow">
                        <a class="arrow" href="#"></a>
                    </div>
                    <div class="arrow-wrap right-arrow">
                        <a class="arrow" href="#"></a>
                    </div-->
                    <ul class="share">
                        <li><a title="Partager sur Twitter" href="#" class="tool twitter"></a></li>
                        <li><a title="Partager sur Facebook" href="#" class="tool facebook"></a></li>
                    </ul>
                </div>
                <div class="info box-edition">
                    <table>
                        <tbody>
                            <tr>
                                <th>{% trans "Description" %}&nbsp;:</th>
                                <td>{{ img.metadata.description|default:"" }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Author" %}&nbsp;:</th>
                                <td>{{ img.metadata.auteur|default:"" }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Period" %}&nbsp;:</th>
                                <td>{{ img.metadata.periode|default:"" }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Production site" %}&nbsp;:</th>
                                <td>{{ img.metadata.site|default:"" }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Localization" %}&nbsp;:</th>
                                <td>{{ img.metadata.localisation|default:"" }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="box-edition">
                    <h3>{% trans "Keywords" %} :</h3>
                    <ul class="list-key-search list-keywords clearfix">
                        {% for t in img.metadata.tags %}
                        {% if t != "" %}<li><a class="box-shadow-2" href="#">{{ t }}</a></li>{% endif %}
                        {% endfor %}
                    </ul>
                </div>
                <div class="box-edition">
                    <h3>{% trans "Fragments from this picture" %} :</h3>
                    {% if fragment_list %}
                    <ul class="fullwidth clearfix">
                      {% for fragment in fragment_list %}
                        <li class="subcol subcol-seventh">
                            <a href="{% url 'view_fragment' fragment_pk=fragment.pk  %}">
                            <div class="center-image">
                                <div class="image-and-fragment">
                                 {% include "partial/picture_and_red_fragment.html" %}
                                </div>
                            </div>
                            <h3>{{ fragment.title }}</h3></a>
                            <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></p>
                        </li>
                      {% endfor %}
                    </ul>
                    {% else %}
                    <p class="null">{% trans "No fragment" %}</p>
                    {% endif %}
                </div>
                <div class="box-edition">
                    <h3>Collections liées à cette image :</h3>
                    <p class="null">{% trans "No collection" %}</p>
                </div>
            </article>
{% endblock %}