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

{% 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="#">
                        <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="{% static 'egonomy/img/empty.gif' %}" width="476" height="350" class="placeholder" />
                                <div class="cutout-canvas"></div>
                            </div>
                            <input id="fragment-path" type="text" class="fragment-path" value="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" />
                        </div>
                        <div class="column column-half">
                            <table class="image-metadata">
                                <tr>
                                    <th>{% trans 'Source picture' %}&nbsp;:</th>
                                    <td><a href="{% url 'annotate_picture' %}">Titre de l'image source</a></td>
                                </tr>
                                <tr>
                                    <th>{% trans 'Title' %}&nbsp;:</th>
                                    <td><input type="text" class="fragment-title" placeholder="Titre du fragment" /></td>
                                </tr>
                                <tr>
                                    <th>{% trans 'Description' %}&nbsp;:</th>
                                    <td><textarea class="fragment-description">Lorem Ipsum description du fragment</textarea></td>
                                </tr>
                                <tr>
                                    <th>{% trans 'Users keywords' %}</th>
                                    <td><textarea class="user-keywords">Modernité, Ready-made</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">
                            <li class="subcol subcol-eighth">
                                <a href="{% url 'view_fragment' %}">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                        <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="82" class="placeholder" />
                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
                                            <path d="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
                                        </svg>
                                    </div>
                                </div>
                                <h3>Titre du fragment</h3></a>
                                <p>{% trans "Annotated by" %} <strong>Julien75</strong></p>
                            </li>
                            <li class="subcol subcol-eighth">
                                <a href="{% url 'view_fragment' %}">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                        <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="82" class="placeholder" />
                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
                                        </svg>
                                    </div>
                                </div>
                                <h3>Titre du fragment</h3></a>
                                <p>{% trans "Annotated by" %} <strong>Julien75</strong></p>
                            </li>
                            <li class="subcol subcol-eighth">
                                <a href="{% url 'view_fragment' %}">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                        <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="82" class="placeholder" />
                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
                                            <path d="M .3 .1 L .55 .15 L .6 .6 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
                                        </svg>
                                    </div>
                                </div>
                                <h3>Titre du fragment</h3></a>
                                <p>{% trans "Annotated by" %} <strong>Julien75</strong></p>
                            </li>
                            <li class="subcol subcol-eighth">
                                <a href="{% url 'view_fragment' %}">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                        <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="82" class="placeholder" />
                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
                                        </svg>
                                    </div>
                                </div>
                                <h3>Titre du fragment</h3></a>
                                <p>{% trans "Annotated by" %} <strong>Julien75</strong></p>
                            </li>
                            <li class="subcol subcol-eighth">
                                <a href="{% url 'view_fragment' %}">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                        <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="82" class="placeholder" />
                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
                                        </svg>
                                    </div>
                                </div>
                                <h3>Titre du fragment</h3></a>
                                <p>{% trans "Annotated by" %} <strong>Julien75</strong></p>
                            </li>
                        </ul>
                    </div>
                </div>
{% endblock %}