{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% load iconolab_tags %}

{% block content %}
	<div id="annotation-wrapper" class="row" style="border: 1px solid gray">
		
		<div v-show="formView" class="col-md-12">
			<div class="col-xs-6">
				<div class="small-image-wrapper" style="position: relative">
					{% thumbnail annotation.image.media "x300" crop="center" as im %}
						<img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />

						<svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">

							<g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
								<path d="{{ annotation.fragment }}" opacity="0.7" fill="orange"></path>
							</g>

						</svg>
						
					{% endthumbnail %}
				</div>
			</div>

			<div class='col-xs-6' style="">
				<p> <strong>Title:</strong> {{ annotation.title }}</p>
				<p> <strong>Description:</strong> {{ annotation.description }}</p>
				<p> <strong>Tags:</strong> {{ annotation.tags }}</p>
				<p> <strong>Fragment:</strong> {{ annotation.fragment }}</p>

				<a href="{% url 'annotation_edit' annotation.id %}">Editer</a> | 
				<a href="{% url 'annotation_edit' annotation.id %}">Proposer une révision</a>
			</div>
		</div>
	</div>

{% endblock %}