{% extends 'iconolab_base.html' %}

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

{% block content %}
	<div id="annotation-wrapper" class="row" style="border: 1px solid gray">
		{% if not user.is_authenticated and revision.state != 1 %}
            <p>Connectez vous pour voir cette proposition de révision.</p>
        {% else %}
		<div v-show="formView" class="col-md-12 annotation-content">
			<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>
                <br>
                <a href="{% url 'item_detail' collection_name image.item.item_guid %}"><i class="fa fa-picture-o" aria-hidden="true"></i> Voir l'objet de cette annotation </a><br>
                <a href="{% url 'annotation_detail' collection_name image_guid annotation_guid  %}"><i class="fa fa-reply" aria-hidden="true"></i> Retour sur l'annotation</a><br>
            </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>
                <br>
                <div class="alert alert-info" role="alert">
                  <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
                  <span class="sr-only">Info:</span>
                    <b>Révision par {{ revision.author }} le {{ revision.created|date:"d/m/Y" }} à {{ revision.created|time:"H:i" }}</b><br>
                    <i class="fa fa-quote-left" aria-hidden="true"></i> {{ revision.creation_comment.first.comment }} <i class="fa fa-quote-right" aria-hidden="true"></i>
                </div>
                {% if revision.parent_revision %}
                  <label>Révision{% if revision.merge_parent_revision %}s{% endif %} source: </label>
                  <ul class="list-unstyled">
                    <li style="margin-left: 10px;">
                      <a href="{% url 'revision_detail' collection_name image_guid annotation_guid revision.parent_revision.revision_guid %}">
                        <i class="fa fa-history" aria-hidden="true"></i> Révision par <b>{{revision.parent_revision.author}}</b> le {{ revision.parent_revision.created|date:"d/m/Y" }} à {{ revision.parent_revision.created|time:"H:i" }}
                      </a>
                    </li>
                    {% if revision.merge_parent_revision %}
                      <li style="margin-left: 10px;">
                        <a href="{% url 'revision_detail' collection_name image_guid annotation_guid revision.merge_parent_revision.revision_guid %}">
                          <i class="fa fa-history" aria-hidden="true"></i> Révision par <b>{{revision.merge_parent_revision.author}}</b> le {{ revision.merge_parent_revision.created|date:"d/m/Y" }} à {{ revision.merge_parent_revision.created|time:"H:i" }}
                        </a>
                      </li>
                    {% endif %}
                  </ul>
                {% endif %}
                  {% if revision.state == 0 and user == annotation.author %}
                  <br>
                  <div class="btn-group" role="group">
                    {% if revision.parent_revision == annotation.current_revision %}
                      <button id="accept-revision" type="button" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span> Accepter cette révision</button>
                    {% endif %}
                    <button id="merge-revision" type="button" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> Etudier cette révision</button>
                    <button id="reject-revision" type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> Rejeter cette révision</button>
                  </div><br><br>
                  
                  {% if revision.parent_revision == annotation.current_revision %}
                    <div id="accept-info" class="alert alert-warning alert-merge"> Si vous acceptez cette proposition, elle deviendra automatiquement la version courante de l'annotation.<br><br>
                       <a class="btn btn-default" href="{% url 'annotation_merge' collection_name image_guid annotation_guid revision_guid %}?auto_accept=True"> Valider </a>
                    </div>
                  {% endif %}
                  <div id="reject-info" class="alert alert-warning alert-merge"> Attention: l'action de rejeter une proposition est irréversible.<br><br>
                     <a class="btn btn-default" href="{% url 'annotation_merge' collection_name image_guid annotation_guid revision_guid %}?auto_reject=True"> Valider </a>
                  </div>
                  <div id="merge-info" class="alert alert-warning alert-merge"> En étudiant la révision, vous accédez à une interface qui vous permet notamment de comparer la proposition avec la version courante de l'annotation avant d'en accepter tout ou partie. <br><br>
                     <a class="btn btn-default" href="{% url 'annotation_merge' collection_name image_guid annotation_guid revision_guid %}"> Valider </a>
                  </div>
                {% endif %}
               
          </div>
		</div>
        {% endif %}
{% endblock %}

{% block footer_js %}
  <script>
    new Vue({
      el: "#revision-detail",
      components: {'Typeahead': iconolab.VueComponents.Typeahead }, 
      methods: { yo: function(){alert(1);} }
    });
    $(".alert-merge").hide();
    $("#accept-revision").click(function(){
        if($("#accept-info").is(":hidden")){
            $(".alert-merge").hide();
            $("#accept-info").slideDown();
        }
    });
    $("#merge-revision").click(function(){
        if($("#merge-info").is(":hidden")){
            $(".alert-merge").hide();
            $("#merge-info").slideDown();
        }
    });
    $("#reject-revision").click(function(){
        if($("#reject-info").is(":hidden")){
            $(".alert-merge").hide();
            $("#reject-info").slideDown();
        }
    })
  </script>
{% endblock %}