{% 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">
		{% 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>
        <ul class="list-unstyled">
          <li><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></li>
          <li><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></li>
          <li></li>
        </ul>

      </div>
			<div id="revision-detail" class="col-xs-6">
                <h4>Annotation révisée par {{ revision.author.username}} </h4>
        				<p> <strong>Titre :</strong> {{ revision.title }}</p>
        				<p> <strong>Description:</strong> {{ revision.description }}</p>
        				<p><strong>Mots-clés :</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 %}
                    {% if user == annotation.author or user.is_staff %}
                    <p>
                      {% if revision.parent_revision == annotation.current_revision %}
                      <button id="accept-revision" type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> Accepter</button>
                      {% endif %}
                      <button id="reject-revision" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Rejeter</button>
                      <a class="btn btn-default" href="{% url 'annotation_merge' collection_name image_guid annotation_guid revision_guid %}"><span class="glyphicon glyphicon-eye-open"></span> Voir les différences</a>
                    </p>
                    {% if revision.parent_revision == annotation.current_revision %}
                      <div id="accept-info" class="alert alert-success alert-merge">
                        <p>Si vous acceptez cette proposition, elle deviendra automatiquement la version courante de l'annotation.</p>
                        <br>
                        <a class="btn btn-default" href="{% url 'annotation_merge' collection_name image_guid annotation_guid revision_guid %}?auto_accept=True">Confirmer</a>
                      </div>
                    {% endif %}
                    <div id="reject-info" class="alert alert-danger alert-merge">
                      <p>Attention: l'action de rejeter une proposition est irréversible.</p>
                      <br>
                      <a class="btn btn-default" href="{% url 'annotation_merge' collection_name image_guid annotation_guid revision_guid %}?auto_reject=True">Confirmer</a>
                    </div>
                    {% endif %}
                  {% endif %}

          </div>
		</div>
        {% endif %}
{% endblock %}

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