{% 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 id="detail-annotation" class="col-md-12">
			<div v-show="!showZoom" class="col-md-6">
				<div class="small-image-wrapper" style="position: relative">
					{% thumbnail annotation.image.media "300x300" crop=False as im %}
						<img 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>
        	<p @click="toggleZoomView" style="padding-top:2px"><i class="fa fa-search-plus showPointer"></i></p>
			</div>

        <div v-show="!showZoom" id="detail-annotation" class='col-xs-6' style="">
            <h4>Annotation créée par {{ annotation.author.username }}</h4>    
  		    <p><strong>Titre:</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>
            {% if user.is_authenticated %}
              <br>
  		      <a href="{% url 'annotation_edit' collection_name image_guid annotation_guid  %}" class="btn btn-default btn-sm">
                {% if user == annotation.author %}
                  <span class="glyphicon glyphicon-edit"></span> Editer l'annotation
                {% else %}
                  <span class="glyphicon glyphicon-share"></span> Proposer une révision
                {% endif %}
              </a>  
		    {% endif %}
          </div>
      <!-- zoomView -->
      <div class="col-md-12 zoom-view" style="display:none" v-show="showZoom">
        
        <div class="col-md-2">
          {% thumbnail annotation.image.media "100x100" crop=False as im %}
          <zoomview ref="zoomview" :zoomtarget="'zoomTarget'" :image-url="'{{ im.url }}'" :width="{{ im.width }}" :height="{{ im.height }}"></zoomview>
          {% endthumbnail %}

          <p><i class="fa fa-close">Voir le détail</p>
        </div>

        <div class="col-md-8">
          {% thumbnail annotation.image.media "900x900" crop=False as im %}
            <svg id="zoomTarget" ref="zoomTarget" width="{{ im.width }}" height="{{ im.height }}">
              <image class="main-image" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ im.url }}" x="0" y="0" width="{{ im.width }}" height="{{ im.height }}"></image>
              <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 class="col-md-2">
          <p class="showPointer" @click="toggleZoomView"><i class="fa fa-close"></i></p>
        </div>
      </div>

		</div>
        <div class='col-md-12'>
          <h4 id="annotation-comments-header">Commentaires</h4>
          <ul class="list-group annotation-comments" id="comments">
            {% for comment in comments %}
              <li class="list-group-item" id="c{{ comment.id }}" style="margin-left:calc({{ comment.level }}*5px);">
                <p id="c{{comment.id}}-content" class="comment-content">{{ comment.comment }}</p>
                <hr class="comment-separator">
                {% if comment.allow_thread and user.is_authenticated %}<div class="pull-right"><a class="btn btn-default btn-xs reply-to-btn" id="reply-to-{{comment.id}}" class="comment-reply-link">Répondre</a></div>{% endif %}
                <div id="c{{comment.id}}-subtext" class="comment-subtext">{{ comment.submit_date|date:"d/m/Y" }} à {{ comment.submit_date|time:"H:i" }}&nbsp;-&nbsp; <b>{{ comment.name }}</b></div>
                <div id="c{{comment.id}}-label-list" class="comment-metacategories">
                {% if comment.revision or comment.metacategories.count > 0 %}&nbsp;-&nbsp;{% endif %}
                {% if comment.revision %}
                  <a href="{% url 'revision_detail' collection_name image_guid annotation_guid comment.revision.revision_guid %}">  
                    <span class="label 
                    {% if comment.revision.author == annotation.author %}
                      label-success
                    {% else %}
                      {% if comment.revision.state == 0 %}
                        label-warning
                      {% elif comment.revision.state == 1 %}
                        label-success
                      {% elif comment.revision.state == 2 %}
                        label-danger
                      {% elif comment.revision.state == 3 %}
                        label-primary
                      {% endif %}
                    {% endif %} revision-link"> 
                    {% if comment.revision.author == annotation.author %}
                      Voir révision
                    {% else %}
                      Voir proposition 
                      {% if comment.revision.state == 0 %}
                        (en attente)
                      {% elif comment.revision.state == 1 %}
                        (validée)
                      {% elif comment.revision.state == 2 %}
                        (rejetée)
                      {% elif comment.revision.state == 3 %}
                        (étudiée)
                      {% endif %}
                    {% endif %}</span> 
                  </a>
                {% endif %}
                {% for metacategory in comment.metacategories.all %}
                  <span class="label label-info">{{metacategory.label}}</span>
                {% endfor %}
                </div>
                </li>
            {% endfor %}
          </ul>
          <ul class="pagination pull-right" style="margin-left: 15px;">
            <li class="active pagination-label"><a>Commentaires par page: </a></li>
            <li class="{% if comments.paginator.per_page == 5 %}active{% endif %}">
              <a {% if comments.paginator.per_page != 5 %}href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page=1&perpage=5"{% endif %}>5</a>
            </li>
            <li class="{% if comments.paginator.per_page == 10 %}active{% endif %}">
              <a {% if comments.paginator.per_page != 10 %}href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page=1&perpage=10"{% endif %}>10</a>
            </li>
            <li class="{% if comments.paginator.per_page == 25 %}active{% endif %}">
              <a {% if comments.paginator.per_page != 25 %}href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page=1&perpage=25"{% endif %}>25</a>
            </li>
            <li class="{% if comments.paginator.per_page == 100 %}active{% endif %}">
              <a {% if comments.paginator.per_page != 100 %}href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page=1&perpage=100"{% endif %}>100</a>
            </li>
          </ul>
          &nbsp;
          {% if comments.has_previous or comments.has_next %}
            <ul class="pagination pull-right">
              {% if comments.has_previous %}
              <li>
                <a href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page={{comments.previous_page_number}}&perpage={{comments.paginator.per_page}}" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              {% endif %}
              
              {% for page in comments.paginator.page_range %}
<!--                 {% if not forloop.first %} -->
<!--                   <li id="shortcut-before-{{page}}" class="pagination-shortcut"><a>...</a></li> -->
<!--                 {% endif %} -->
                <li id="page-link-{{page}}" class="pagination-link {% if page == comments.number %}active{% endif %}">
                  <a {% if page != comments.number %}href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page={{page}}&perpage={{comments.paginator.per_page}}"{% endif %}>{{page}}</a>
                </li>
                
              {% endfor %}
              
              {% if comments.has_next %}
              <li>
                <a href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page={{comments.next_page_number}}&perpage={{comments.paginator.per_page}}" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              {% endif %}
            </ul>
          {% endif %}
          </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 }}
          <input id="reply-to-field" type="hidden" name="reply_to" value="0"></input>
          <input type="hidden" name="next" value="{% url 'annotation_detail' collection_name image_guid annotation_guid %}">
          <h4> Commenter en tant que {{user.username}} </h4>
          <div class="reply-to-container">
            <label id="form-reply-to-label" class="control-label reply-to-label" for="id_{{ comment_form.comment.name }}">En réponse à: </label>
            <div class="alert alert-info reply-to-alert">
               <p class="reply-to-content comment-content"></p>
               <hr class="comment-separator">
               <div class="reply-to-subtext comment-subtext"></div>
               <div class="reply-to-label-list comment-metacategories"></div>
            </div>
            <a class="btn btn-default btn-sm reply-to-cancel">Annuler et répondre sur le fil principal</a><br><br>
          </div>
          <fieldset class="form-group {% if comment_form.comment.errors %}has-error{% endif %}">
            <label class="control-label" for="id_{{ comment_form.comment.name }}">Commentaire</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>
          <fieldset class="form-group {% if comment_form.metacategories.errors %}has-error{% endif %}">
            <div class="input-group">
              {% for metacategory in comment_form.metacategories %}
                <label class="checkbox-inline" for="{{metacategory.id_for_label}}">
                    {{ metacategory.tag }} {{metacategory.choice_label}}
                </label>
              {% endfor %}
            </div>
          </fieldset>
          <p class="submit">
            <input class="btn btn-default" type="submit" name="post" class="submit-post" value="{% trans "Post" %}"/>
          </p>
        </form>
        {% endif %}
        
	</div>
{% endblock %}

{% block footer_js %}
  <script>
    new Vue({
      el: "#detail-annotation",
      
      data: {
        showZoom: false
      },

      methods: {
        
        toggleZoomView: function () {
          if (this.showZoom) {
            this.showZoom = false;
          }

          else {
            this.showZoom = true;
          }
        },


      },

      components: {
        'Typeahead': iconolab.VueComponents.Typeahead,
        'Zoomview': iconolab.VueComponents.Zoomview
      }
    });
    
    $(".reply-to-container").hide()
    $(".reply-to-btn").click(function(event){
        $(".reply-to-container").hide()
        var commentID = /reply\-to\-([0-9]+)/.exec($(this).attr("id"))[1];
        var comment_content = $("#c"+commentID+"-content").html();
        var comment_subtext = $("#c"+commentID+"-subtext").html();
        var comment_labels = $("#c"+commentID+"-label-list").html();
        $(".reply-to-alert .reply-to-content").html(comment_content);
        $(".reply-to-alert .reply-to-subtext").html(comment_subtext);
        $(".reply-to-alert .reply-to-label-list").html(comment_labels);
        $(".reply-to-container").slideDown();
        $("#form-reply-to-label").get(0).scrollIntoView();
        $("#reply-to-field").val(commentID);
    })
    $(".reply-to-cancel").click(function(event){
      $(".reply-to-container").hide()
      $(".reply-to-alert .reply-to-content").html("");
      $(".reply-to-alert .reply-to-subtext").html("");
      $(".reply-to-alert .reply-to-label-list").html("");
      $("#reply-to-field").val("0");
    })
  </script>
{% endblock %}