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

{% block title %}{% trans "Annotate a picture" %}{% endblock %}

{% block content %}
                <div class="fullwidth">
                    <div class="column column-half">
                        <h2>Titre de l'image</h2>
                        <div class="fullphoto placeholder">
                            Photo à annoter
                        </div>
                    </div>
                    <div class="column column-half">
                        <form action="#">
                        <table class="image-metadata">
                            <tr>
                                <th>Description&nbsp;:</th>
                                <td>Lorem Ipsum, Ceci est la description de l'&oelig;uvre représentée dans l'image.</td>
                            </tr>
                            <tr>
                                <th>Auteur&nbsp;:</th>
                                <td>Marcel Duchamp</td>
                            </tr>
                            <tr>
                                <th>Période&nbsp;:</th>
                                <td>XXème siècle</td>
                            </tr>
                            <tr>
                                <th>Site de Production&nbsp;:</th>
                                <td>Paris, France</td>
                            </tr>
                            <tr>
                                <th>Localisation&nbsp;:</th>
                                <td>Musée du Louvre, Paris.</td>
                            </tr>
                            <tr>
                                <th>Mots-clés RMN&nbsp;:</th>
                                <td>Art contemporain, Art conceptuel, Cyclisme</td>
                            </tr>
                            <tr>
                                <th>Mots-clés Utilisateurs</th>
                                <td><textarea class="user-keywords">Modernité, Ready-made</textarea></td>
                            </tr>
                            <tr>
                                <th> </th>
                                <td><input class="user-submit" type="submit" value="Enregistrer les mots-clés" /></td>
                            </tr>
                            <tr>
                                <th>Dernière modification&nbsp;:</th>
                                <td>le 23 janvier 2013 par Utilisateur17</td>
                            </tr>
                        </table>
                        </form>
                        <div class="fullwidth">
                            <a href="#" class="big-button">Créer un fragment</a>
                        </div>
                    </div>
                </div>
                <div class="fullwidth">
                    <div class="column column-full">
                        <h2>Fragments de cette image</h2>
                        <ul class="fullwidth">
                            <li class="subcol subcol-eighth">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                        <img src="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>
                                <p>Annoté par <strong>Julien75</strong></p>
                            </li>
                            <li class="subcol subcol-eighth">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                        <img src="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>
                                <p>Annoté par <strong>Julien75</strong></p>
                            </li>
                            <li class="subcol subcol-eighth">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                        <img src="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>
                                <p>Annoté par <strong>Julien75</strong></p>
                            </li>
                            <li class="subcol subcol-eighth">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                        <img src="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>
                                <p>Annoté par <strong>Julien75</strong></p>
                            </li>
                            <li class="subcol subcol-eighth">
                                <div class="center-image">
                                    <div class="image-and-fragment">
                                        <img src="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>
                                <p>Annoté par <strong>Julien75</strong></p>
                            </li>
                        </ul>
                    </div>
                </div>
{% endblock %}