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

{% block title %}{% trans "Create or edit a fragment" %}{% endblock %}

{% block js_import %}
{{block.super}}
        <script type="text/javascript" src="{% static 'egonomy/lib/raphael-min.js' %}"></script>
        <script type="text/javascript" src="{% static 'egonomy/js/cutout.js' %}"></script>
{% endblock %}
{% block js_inline %}
{{block.super}}
        <script type="text/javascript">
            window.onload = function() {
            	if($("#add_rmn_tags")){
	                $("#add_rmn_tags").click(function() {
	                    var s = $("#users_keywords").val();
	                    if(s!="" && s.substring(s.length - 1)!=",") {
	                        s = s + ",";
	                    }
	                    $("#users_keywords").val(s + $("#rmn_tags").html());
	                });
            	}
           	};
        </script>
{% endblock %}

{% block content %}
                <div class="fullwidth">
                    <form action="{% url 'save_fragment' %}" method="POST">
                        <div class="column column-half">
                            <a href="#" class="head-button clear-fragment" title="{% trans 'Erase the drawing' %}">&times;</a>
                            <a href="#" class="head-button reset-fragment" title="{% trans 'Back to the original drawing' %}">&#8634;</a>
                            <h2>{% trans 'New fragment' %}&nbsp;:</h2>
                            <div class="center-image">
	                            <div class="image-and-fragment">
	                              {% with img.info.image_file as image %}
	                              {% if image|ratio > 0.8 %}
	                               {% 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 %}
		                          {% else %}
	                               {% 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="476" height="476" class="placeholder" />
	                               {% endthumbnail %}
		                          {% endif %}
		                          {% endwith %}
	                                <div class="cutout-canvas"></div>
	                            </div>
                            </div>
                            <input name="fragment_path" id="fragment_path" type="hidden" class="fragment-path column-half" value="" />
                            <input name="image_id" id="image_id" type="hidden" value="{{ img.id }}" />
                        {% csrf_token %}
                        </div>
                        <div class="column column-half">
                            <table class="image-metadata">
                                <tr>
                                    <th>{% trans 'Source picture' %}&nbsp;:</th>
                                    <td><a href="{% url 'annotate_picture' image_id=img.id %}">{{ img.metadata.titre|default:_("No title") }}</a></td>
                                </tr>
                                <tr>
                                    <th>{% trans "Fragment's title" %}&nbsp;:</th>
                                    <td><input type="text" class="fragment-title" placeholder="{% trans "Fragment's title" %}" name="fragment_title" id="fragment_title"/></td>
                                </tr>
                                <tr>
                                    <th>{% trans "Fragment's description" %}&nbsp;:</th>
                                    <td><textarea class="fragment-description" name="fragment_description" id="fragment_description"></textarea></td>
                                </tr>
                                <tr>
                                    <th>{% trans 'Users keywords' %}&nbsp;:</th>
                                    <td><textarea class="user-keywords" name="users_keywords" id="users_keywords"></textarea></td>
                                </tr>
                                {% if img.metadata.mots_cles %}
                                <tr>
                                    <th>{% trans 'RMN keywords' %}&nbsp;:</th>
                                    <td><span id="rmn_tags">{{ img.metadata.mots_cles }}</span><br/><br/><span id="add_rmn_tags" class="right add_tag_btn">+ {% trans 'Add RMN keywords to yours' %}</span></td>
                                </tr>
                                {% endif %}
                            </table>
                            <div class="fullwidth">
                                <input class="user-submit" type="submit" value="{% trans 'Save the fragment' %}" />
                            </div>
                        </div>
                    </form>
                </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 %}