{% 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">
                          {% if fragment_only %}
                            <div class="image-and-fragment large_square_fragment">
                             {% with fragment.image.info.image_file as image %}
                             {% include "partial/fragment_only.html" %}
                             {% endwith %}
                            </div>
                          {% else %}
	                        <div class="image-and-fragment">
	                          {% with 0.8 as ratio %}
	                          {% with "476" as w_size %}
	                          {% with "x600" as h_size %}
	                          {% include "partial/picture_and_fragment.html" %}
                              {% endwith %}
                              {% endwith %}
                              {% endwith %}
	                        </div>
                          {% endif %}
	                    </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>
                                <tr>
                                    <th>&nbsp;</th>
                                    <td><a href="{% url 'delete_fragment' %}?fragment_pk={{fragment.pk}}" class="big-button"  onclick="return confirm('{% trans "Do you really want to delete this fragment ? Warning : this action est irreversible." %}')">{% trans "Delete this fragment" %}</a></td>
                                </tr>
                                {% endifequal %}
                                <tr>
                                    <th>&nbsp;</th>
                                    <td><a href="{% url 'create_fragment' image_id=fragment.image.id %}?duplicate={{fragment.pk}}" class="big-button">{% trans "Duplicate this fragment" %}</a></td>
                                </tr>
                            </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 class="fullwidth">
                          {% if fragment_only %}
                            <a href="{% url 'view_fragment' fragment_pk=fragment.pk %}?fragment_only=0">
                                {% trans "See the fragment in its full picture" %} :<br/>
	                            <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>
                          {% else %}
                            <a href="{% url 'view_fragment' fragment_pk=fragment.pk %}">
                                {% trans "See the fragment only" %} :<br/>
                                <div class="image-and-fragment little_square_fragment">
                                 {% with image=fragment.image.info.image_file %}
                                 {% include "partial/fragment_only.html" %}
                                 {% endwith %}
                                </div>
                            </a>
                          {% endif %}
                        </div>
                    </div>
                </div>
                <div class="fullwidth">
                    <div class="column column-full">
                        <h2>{% trans "Fragments from this picture" %}</h2>
                        <ul class="fullwidth">
                          {% for fragment in fragment_list %}
                            <li class="subcol subcol-eighth">
                                <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>
                    </div>
                </div>
{% endblock %}