{% 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 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.current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
							</g>

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

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

				<a href="{% url 'annotation_edit' collection_name image_guid annotation_guid  %}">Editer</a> | 
				<a href="{% url 'annotation_edit' collection_name image_guid annotation_guid %}">Proposer une révision</a>
			</div>
		</div>
        <div class='col-md-12'>
          {% get_comment_list for annotation as comment_list %}
          <dl class="dl-horizontal" id="comments">
            {% for comment in comment_list %}
              <dt id="c{{ comment.id }}">
                {{ comment.name }}
              </dt>
              <dd>
                <p>{{ comment.comment }} </p>
                <div style="font-size:0.9em">{{ comment.submit_date }}&nbsp;-&nbsp;
                {% if comment.allow_thread %}&nbsp;-&nbsp;<a href="{{ comment.get_reply_url }}">{% trans "Reply" %}</a>{% endif %}</div>
              </dd>
            {% endfor %}
          </dl>
        </div>
        <div class='col-md-12'>
        {% if user.is_authenticated %}
        {% get_comment_form for annotation as comment_form %}
        <form class="form" action="{% comment_form_target %}" method="POST">
          {% csrf_token %}
          {{ comment_form.content_type }}
          {{ comment_form.object_pk }}
          {{ comment_form.timestamp }}
          {{ comment_form.security_hash }}
          <input type="hidden" name="next" value="{% url 'annotation_create' collection_name image_guid %}">
          <fieldset class="form-group">
            <label class="control-label" for="id_{{ comment_form.name.name }}">Commenting as {{ user.username }}</label>
          </fieldset>
          <fieldset class="form-group">
            <label class="control-label" for="id_{{ comment_form.comment.name }}">{{ comment_form.comment.label }}</label>
            <textarea class="form-control"
              name="{{ comment_form.comment.name }}"
              id="id_{{ comment_form.comment.name }}" ></textarea>
          </fieldset>
          <button type="submit" class="save btn btn-default">Poster</button>
        </form>
        {% endif %}
        <div></div>
	</div>
{% endblock %}