{% extends "egonomy_base.html" %}

{% load static %}

{% load i18n %}

{% load thumbnail %}

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

{% block js_import %}

{{block.super}}

        <script type="text/javascript" src="{% static 'egonomy/lib/jquery.min.js' %}"></script>

        <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 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="image-and-fragment">

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

                                <div class="cutout-canvas"></div>

                            </div>

                            <input name="fragment_path" id="fragment_path" type="text" class="fragment-path column-half" value="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" />

                        {% csrf_token %}

                        </div>

                        <div class="column column-half">

                            <table class="image-metadata">

                                <tr>

                                    <th>{% trans 'Source picture' %}&nbsp;:</th>

                                </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>

                                <tr>

                                    <th> </th>

                                    <td></td>

                                </tr>

                                <tr>

                                    <th>{% trans 'Last modification' %}&nbsp;:</th>

                                    <td>le 23 janvier 2013 par Utilisateur17</td>

                                </tr>

                            </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">

                                <div class="center-image">

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

                                      {% if frg.image.image|is_portrait %}

                                       {% thumbnail frg.image.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 frg.image.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 %}

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

                                            <path d="{{ frg.path }}" 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 %}