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

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

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

{% block content %}
            <div class="title-page">
                <h2>{{ fragment.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_fragments' %}?search={{ search }}"></a></li>
                    {% endif %}
                </ul>
                <ul class="clearfix">
                    {% ifequal user fragment.author %}
                    <li>
                        <a class="icon edit" href="{% url 'create_fragment' image_id=fragment.image.id fragment_pk=fragment.pk %}">{% trans "Modify this fragment" %}</a>
                    </li>
                    <li>
                        <a class="icon trash" href="{% url 'delete_fragment' %}?fragment_pk={{fragment.pk}}" onclick="return confirm('{% trans "Do you really want to delete this fragment ? Warning : this action est irreversible." %}')">{% trans "Delete this fragment" %}</a>
                    </li>
                    {% endifequal %}
                    <li>
                        <a class="icon copy" href="{% url 'create_fragment' image_id=fragment.image.id %}?duplicate={{fragment.pk}}">{% trans "Duplicate this fragment" %}</a>
                    </li>
                    <li>
                        <a class="icon cut" href="{% url 'create_fragment' image_id=fragment.image.id %}">{% trans "Create a fragment" %}</a>
                    </li>
                    <li>
                      {% if user.is_authenticated %}
                        <a class="icon plus open-popin additemtocollection" data-type="fragment" data-id="{{ fragment.pk }}" href="#add-to-collection">{% trans "Add to a collection" %}</a>
                      {% else %}
                        <a class="icon plus" href="{% url 'login' %}?next={% url 'view_fragment' fragment_pk=fragment.pk %}">{% trans "Add to a collection" %}</a>
                      {% endif %}
                    </li>
                    <!--li>
                        <a class="icon save" href="#">Enregistrer sous</a>
                    </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">
                      <a draggable="true"  data-title="{{ fragment.title }}" 
					     data-description="{% trans 'Fragment from' %} {{ fragment.image.metadata.titre|default:_('No title') }} {% trans 'Annotated by' %} {{ fragment.author }}" 
					     href="{% url 'view_fragment' fragment_pk=fragment.pk %}">
                      {% if fragment_only %}
                        <div class="image-and-fragment square-fragment-600">
                         {% with fragment.image.info.image_file as image %}
                         {% include "partial/fragment_only.html" %}
                         {% endwith %}
                        </div>
                      {% else %}
                        <div class="image-and-fragment">
                          {% with 0.99 as ratio %}
                          {% with "600" as w_size %}
                          {% with "x600" as h_size %}
                          {% include "partial/picture_and_fragment.html" %}
                          {% endwith %}
                          {% endwith %}
                          {% endwith %}
                        </div>
                      {% endif %}
                      </a>
                    </div>
                  {% if search %}
                    {% if index_search > 0 %}
                    <div class="arrow-wrap left-arrow">
                        <a class="arrow" href="{% url 'fragment_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 'fragment_by_search' %}?search={{ search }}&index_search={{ index_search|add:1 }}"></a>
                    </div>
                    {% endif %}
                  {% endif %}
                    <ul class="share">
                        <li><a title="Partager sur Twitter" target="_blank" href="https://twitter.com/share?url={{ request.build_absolute_uri|urlencode }}" class="tool twitter"></a></li>
                        <li><a title="Partager sur Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri|urlencode }}" class="tool facebook"></a></li>
                    </ul>
                </div>
                <div class="info box-edition clearfix">
                    <table class="edition-table-left">
                        <tbody>
                            <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 title" %}&nbsp;:</th>
                                <td>{{ fragment.title }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Fragment's description" %}&nbsp;:</th>
                                <td>{{ fragment.description }}</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>
                        </tbody>
                    </table>
                    <table class="edition-table-right">
                        <tbody>
                        {% if fragment_only %}
                            <tr><th><a href="{% url 'view_fragment' fragment_pk=fragment.pk %}?fragment_only=0">{% trans "See the fragment in its full picture" %} :</a></th></tr>
                            <tr><td><a href="{% url 'view_fragment' fragment_pk=fragment.pk %}?fragment_only=0">
                                <div class="image-and-fragment">
                                  {% with 1 as ratio %}
                                  {% with "110" as w_size %}
                                  {% with "x110" as h_size %}
                                  {% include "partial/picture_and_fragment.html" %}
                                  {% endwith %}
                                  {% endwith %}
                                  {% endwith %}
                                </div></a>
                            </td></tr>
                            </a>
                        {% else %}
                            <tr><th><a href="{% url 'view_fragment' fragment_pk=fragment.pk %}">{% trans "See the fragment only" %} :</a></th></tr>
                            <tr><td><a href="{% url 'view_fragment' fragment_pk=fragment.pk %}">
                                <div class="image-and-fragment square-fragment-110">
                                 {% with image=fragment.image.info.image_file %}
                                 {% include "partial/fragment_only.html" %}
                                 {% endwith %}
                                </div></a>
                            </td></tr>
                            </a>
                        {% endif %}
                        </tbody>
                    </table>
                </div>
                <div class="box-edition">
                    <table>
                        <tbody>
                            <tr>
                                <th class="va-top">{% trans "Fragment's keywords" %}&nbsp;:</th>
                                <td>
                                    <ul class="list-key-search no-before list-keywords clearfix">
                                      {% for t in fragment.tag_list_linked %}
	                                    {% if t.label != "" %}
	                                      {% if t.url != "" %}
	                                        <li class="for-overlay" data-dbpedia-uri="http://fr.dbpedia.org/resource/{{ t.url|slice:'29:' }}">
	                                          <span class="box-shadow-2 clean-linked-list">
	                                            <a data-tag="{{ t.label }}"  href='{% url "all_fragments" %}?field=all&search="{{ t.label }}"'>{{ t.label }}</a> 
	                                            <a href="{{ t.url }}" target="_blank"><span class="logo_wikipedia">&nbsp;</span></a>
	                                          </span>
	                                        </li>
	                                      {% else %}
	                                        <li><a data-tag="{{ t.label }}" class="box-shadow-2" href='{% url "all_fragments" %}?field=all&search="{{ t.label }}"'>{{ t.label }}</a></li>
	                                      {% endif %}
	                                    {% endif %}
	                                  {% endfor %}
                                    </ul>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </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 fragment" %} :</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>
            </article>
            <div class="dbpedia-overlay clearfix">
                <a class="dbpedia-close" href="#">&times;</a>
                <img class="dbpedia-image" />
                <h2 class="dbpedia-title"></h2>
                <p class="dbpedia-abstract"></p>
                <p class="dbpedia-source"><a href="#" target="_blank">{% trans 'Source&nbsp;: Wikipédia' %}</a></p>
            </div>
{% endblock %}