{% extends "egonomy_newbase.html" %}

{% load static %}

{% load absstatic %}

{% load i18n %}

{% load thumbnail %}

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

{% block css_page %}

    <link rel="stylesheet" href="{% static 'egonomy/css/slideshow.css' %}" />

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

                    {% if search %}

                    <li><a class="go-to search" href="{% url 'all_pictures' %}?search={{ search }}"></a></li>

                    {% endif %}

                </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 additemtocollection" data-type="image" data-id="{{ img.id }}" href="#add-to-collection">{% trans "Add to a collection" %}</a>

                      {% else %}

                        <a class="icon plus" href="{% url 'login' %}?next={% url 'annotate_picture' image_id=img.id %}">{% trans "Add to a 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">

                    <a draggable="true" ondragstart="onDragImage(event)"

                       data-image="{% static img.info.image_file.url %}" 

                       data-clip-path=""

                       data-title="{{ img.metadata.titre|default:_('No title') }}" 

                       data-description="{% trans 'Author' %} : {{ img.metadata.auteur|default:_('Not documented') }}" href="{% url 'annotate_picture' image_id=img.id %}">

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

                      {% 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 %}

                      {% if fragment_list %}

                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">

                          {% for fragment in fragment_list %}

					        <path class="svg_over_image" d="{{ fragment.coordinates }}" stroke="red" stroke-width="0" fill="red" fill-opacity=".3" 

					              data-title="{{ fragment.title }}" data-description="{{ fragment.description }}" data-tags="{{ fragment.tags }}" />

                          {% endfor %}

					    </svg>

                      {% endif %}

                    </div>

                    </a>

                  {% if search %}

                    {% if index_search > 0 %}

                    <div class="arrow-wrap left-arrow">

                        <a class="arrow" href="{% url 'picture_by_search' %}?search={{ search }}&index_search={{ index_search|add:-1 }}"></a>

                    </div>

                    {% endif %}

                    {% if index_search|add:1 < nb_results %}

                    <div class="arrow-wrap right-arrow">

                        <a class="arrow" href="{% url 'picture_by_search' %}?search={{ search }}&index_search={{ index_search|add:1 }}"></a>

                    </div>

                    {% endif %}

                  {% endif %}

                    <ul class="share">

                    </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.tag_list %}

                        {% if t != "" %}<li><a class="box-shadow-2" href='{% url "all_pictures" %}?field=all&search="{{ t }}"'>{{ 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>{% trans "Collections including this picture" %} :</h3>

                    {% if related_collections %}

                    <ul class="fullwidth clearfix">

                    {% for c in related_collections %}

                        <li class="subcol subcol-seventh">

                            <a href="{% url 'view_collection' collection_pk=c.pk %}">

                            <h3>{{ c.title }}</h3></a>

                            <p>{% trans "by" %} <strong><a href="{% url 'user_collections' username=c.author %}">{{ c.author }}</a></strong></p>

                        </li>

                      {% endfor %}

                    </ul>

                    {% else %}

                    <p class="null">{% trans "No collection" %}</p>

                    {% endif %}

                </div>

	            <div id="info_fragment" style="display:none;">

	                <p>coucou</p>

	            </div>

            </article>

{% endblock %}

{% block js_page %}

	<script type="text/javascript">

	$(function() {

		// Functions to show tag's images

		$(".svg_over_image").hover(

		    function(e){

		        ti = $(this).attr("data-title").split(",");

		        de = $(this).attr("data-description").split(",");

		        ta = $(this).attr("data-tags").split(",");

		        var s = '<h3>' + ti + '</h3><p class="desc">' + de + '</p><p>' + ta + '</p>';

		        $("#info_fragment").html(s);

		        $("#info_fragment").css({'top':e.pageY-50,'right':$(window).width()-e.pageX});

		        $("#info_fragment").show();

		    },

		    function(e){

		        $("#info_fragment").hide();

		    }

		);

	});

    function onDragImage(e){

    	var dt = e.dataTransfer;

    	var snippet = $('<div>').html(dt.getData("text/html"));

    	snippet.find("svg").remove();

    	e.dataTransfer.setData("text/html", snippet.html());

    }

	</script>

{% endblock %}