{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% 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 @click="showEditor" 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">
							
							<defs>
								<mask xmlns="http://www.w3.org/2000/svg" id="smallImage">
									<rect x="0" y="0" width="{{ im.width }}", height="{{ im.height }}" fill="white"/>
									<g v-bind:transform="transformMatrix">
										<path v-bind:d="fragmentPath"></path>
									</g>
								</mask>	
							</defs>

							<g v-show="!displayMask" v-bind:transform="transformMatrix">
								<path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
							</g>

							<rect v-show="displayMask" v-el:small-mask x="0" y="0" mask="url(#smallImage)" opacity="0.7" fill="white" width="{{ im.width }}" height="{{ im.height }}"></rect>
						</svg>
						
					{% endthumbnail %}
				</div>
				<ul class="inline">
				<a @click="showEditor" class="showPointer"> <i class='fa fa-edit'></i> Editer le fragment</a>
				<a v-show="!displayMask" @click="highLightZone" class="showPointer"> <i class='fa fa-eye-slash'></i>Masquer l'image</a>
				<a v-show="displayMask" @click="highLightZone(1)" class="showPointer"> <i class='fa fa-eye-slash'></i>Afficher la zone</a>

				</ul>
			</div>

			<div class='col-xs-6' style="">
				title: {{ annotation.title }}
				Description: {{ annotation.description }}
				Tags: {{ annotation.tags }}

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

{% endblock %}