{% extends 'iconolab_base.html' %}

{% load i18n %}
{% load staticfiles %}
{% load comments %}
{% load comments_xtd %}
{% load thumbnail %}
{% load iconolab_tags %}

{% block content %}
	<a href="{% url 'image_detail' collection_name image_guid %}"><i class="fa fa-list"></i> Revoir l'image </a>
	<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 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="{{ revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
							</g>

						</svg>
						
					{% endthumbnail %}
				</div>
			</div>
			<div id="revision-detail" class='col-xs-6' style="">
                <h4>Annotation révisée par {{ revision.author.username}} </h4>
				<p> <strong>Title:</strong> {{ revision.title }}</p>
				<p> <strong>Description:</strong> {{ revision.description }}</p>
				<p><strong>Tags:</strong></p>
                <typeahead :read-only="1" :tags="{{ tags_data }}"></typeahead>
                <div class="alert alert-info" role="alert">
                  <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                  <span class="sr-only">Info:</span>
                    <b>Revision created by {{ revision.author }} on the {{ revision.created }}</b><br>
                    "{{ revision.creation_comment.first.comment }}"
                </div>
				<a href="{% url 'annotation_detail' collection_name image_guid annotation_guid  %}">Retour sur l'annotation</a>
				{% if revision.parent_revision %} | <a href="{% url 'revision_detail' collection_name image_guid annotation_guid revision.parent_revision.revision_guid %}">Voir révision précédente</a>{% endif %}
			</div>
		</div>
{% endblock %}

{% block footer_js %}
  <script>
    new Vue({
      el: "#revision-detail",
      components: {'Typeahead': iconolab.VueComponents.Typeahead }, 
      methods: { yo: function(){alert(1);} }
    });
  </script>
{% endblock %}