{% 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 id="detail-annotation" class='col-xs-6' style="">
        <h4>Annotation</h4>
				<p> <strong>Title:</strong> {{ annotation.current_revision.title }}</p>
				<p> <strong>Description:</strong> {{ annotation.current_revision.description }}</p>
        <p><strong>Tags:</strong></p>
        <typeahead :read-only="1" :tags="{{ tags_data }}"></typeahead>

				<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'>
          <h4>Comments</h4>
          {% get_comment_list for annotation as comment_list %}
          <ul class="list-group" id="comments">
            {% for comment in comment_list %}
              <li class="list-group-item" id="c{{ comment.id }}">
                <p><p>
                <p>{{ comment.comment }} </p>
                <div style="font-size:0.9em">{{ comment.submit_date }}&nbsp;-&nbsp; <b>{{ comment.name }}</b>
                {% if comment.revision %}&nbsp;-&nbsp; <a href="{% url 'revision_detail' collection_name image_guid annotation_guid comment.revision.revision_guid %}">Show revision</a>{% endif %}
                {% if comment.allow_thread %}&nbsp;-&nbsp;  <a href="{{ comment.get_reply_url }}">{% trans "Reply" %}</a>{% endif %}</div>
              </li>
            {% endfor %}
          </ul>
        </div>
        <div class='col-md-12'>
        {% if user.is_authenticated %}
        {% if not comment_form %}
          {% get_comment_form for annotation as comment_form %}
        {% endif %}
        <form class="form" action="{% url 'post_comment' %}" method="POST">
          {% csrf_token %}
          {{ comment_form.content_type }}
          {{ comment_form.object_pk }}
          {{ comment_form.timestamp }}
          {{ comment_form.security_hash }}
          {{ comment_form.reply_to }}
          <input type="hidden" name="next" value="{% url 'annotation_detail' collection_name image_guid annotation_guid %}">
          <h4> Commenting as {{user.username}} </h4>
          <fieldset class="form-group {% if comment_form.comment.errors %}has-error{% endif %}">
            <label class="control-label" for="id_{{ comment_form.comment.name }}">{{ comment_form.comment.label }}</label>
            {% if comment_form.comment.errors %}
              <div class="alert alert-danger" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>
                  {{ comment_form.comment.errors | striptags }}
              </div>
            {% endif %}
            <textarea class="form-control"
              name="{{ comment_form.comment.name }}"
              id="id_{{ comment_form.comment.name }}" ></textarea>
          </fieldset>
          <p class="submit">
            <input class="btn btn-default" type="submit" name="post" class="submit-post" value="{% trans "Post" %}"/>
          </p>
        </form>
        {% endif %}
        <div></div>
	</div>
{% endblock %}

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