{% extends 'iconolab_base.html' %}

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

{% block content %}
  <div id="annotation-wrapper" class="row" style="border: 1px solid gray;padding-top: 10px;">
    
    <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>
            <br>
          <p class="btn btn-default btn-sm" @click="toggleZoomView" style="padding-top:2px"><i class="fa fa-search-plus showPointer"></i></p>
            <a class="btn btn-default btn-sm" href="{% url 'item_detail' collection_name image.item.item_guid %}"><i class="fa fa-eye" aria-hidden="true"></i> Voir l'objet de cette annotation</a>
            <a class="btn btn-default btn-sm" href="{% url 'image_detail' collection_name image_guid %}"><i class="fa fa-picture-o" aria-hidden="true"></i> Voir les annotations sur l'image</a>
      
            </div>
        <div v-show="!showZoom" id="detail-annotation" class='col-md-6' style="">
            <h4>Annotation créée par <a href="{% url 'user_home' annotation.author.id %}">{{ annotation.author.username }}</a></h4>    
          <p><strong>Titre :</strong> {{ annotation.current_revision.title }}</p>
          <p><strong>Description :</strong> {{ annotation.current_revision.description }}</p>
            {% if tags_data != "[]" %}
              <p><strong>Mot-clés :</strong></p>
              <typeahead :read-only="1" :tags="{{ tags_data }}"></typeahead>
              <br>
            {% endif %}
            <br>
            {% include "partials/annotation_stats_panel.html" with annotation=annotation label="Statistiques sur cette annotation:" %}  
        </div>
        <!-- zoomView -->
        <div class="col-md-12 zoom-view" style="display:none" v-show="showZoom">
          <div class="col-md-12 no-padding"><p @click="toggleZoomView" class="btn btn-link pull-right"><i class="fa fa-close"></i></i> Fermer</p></div>
          <div class="col-md-2">
            {% thumbnail annotation.image.media "100x100" crop=False as im %}
            <zoomview ref="zoomview" main-image-id="main-image" zoomtarget="zoomTarget" :image-url="'{{ im.url }}'" :image-width="{{ im.width }}" :image-height="{{ im.height }}"></zoomview>
            {% endthumbnail %}
          </div>
          <div class="col-md-10 zoomTarget-wrapper">
            {% with image.media as im %}
              <svg id="zoomTarget" ref="zoomTarget" width="920" height="920"> 
                <image id="main-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>
            {% endwith %}
            </div>
          </div>

    </div>
  </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
      }
    });
  </script>
{% endblock %}