{% extends 'iconolab_base.html' %}

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

{% block content_fluid %}

<div class="annotation-navigator">
  <div class="annotation-navigator-list">
    <div id="annotations-{{image.image_guid}}" class="image-annotations-list">
      {% if image.annotations %}
        <div class="list-group">
        {% for annotation in image.latest_annotations %}
          <a href="#{{ annotation.annotation_guid }}" class="list-group-item"
            data-annotation-id="{{ annotation.annotation_guid }}"
            data-revision-id="{{ annotation.current_revision.revision_guid }}">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h5 class="list-group-item-heading">{{ annotation.current_revision.title }}</h5>
            <p class="list-group-item-text">{{ annotation.current_revision.description }}</p>
            {% for tagging_info in annotation.current_revision.tagginginfo_set.all %}
              <span class="label label-warning">{{ tagging_info.tag.label }}</span>
            {% endfor %}
          </a>
        {% endfor %}
        </div>
      {% else %}
        Pas d'annotation pour cette image
      {% endif %}
    </div>
  </div>
  <div class="annotation-navigator-canvas">

    <image-annotator v-bind:annotation="annotation"
      ref="annotator"
      image="{% with image.media as img %}{{ img.url }}{% endwith %}"
      thumbnail="{% thumbnail image.media '100x100' crop=False as thumb %}{{ thumb.url }}{% endthumbnail %}"></image-annotator>

    <form id="form-annotation" action="{% url 'annotation_create' collection_name image.image_guid %}" method="POST">
      {% csrf_token %}
      <input type="hidden" name="{{ form.title.name }}">
      <input type="hidden" name="{{ form.description.name }}">
      <input type="hidden" name="{{ form.fragment.name }}">
      <input type="hidden" name="{{ form.tags.name }}">
    </form>
  </div>
  <div class="annotation-navigator-panel">
    <div class="panel panel-default">
      <div class="panel-body">
        <annotation-form v-bind:annotation="annotation"
          action="{% url 'annotation_edit' collection_name image_guid ':annotation_guid' %}">
          {% csrf_token %}
        </annotation-form>
        <comment-list v-bind:annotation="annotation"
          fetch="{% url 'get_annotation_comments_json' ':annotation_guid' %}"></comment-list>
        <div id="form-comment">
          <form>
              <div class="form-group">
                <textarea class="form-control input-sm" placeholder="Ajouter mon commentaire..." disabled></textarea>
              </div>
              <button type="submit" class="btn btn-block btn-sm btn-primary" disabled>Commenter</button>
          </form>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block footer_js %}
<script>

  var currentPath = "{{ request.path }}";

  var vm = new Vue({
    el: '.annotation-navigator',
    data: function() {
      return {
        annotation: null
      };
    }
  });

  var annotations = {};
  {% if image.annotations %}
    {% for annotation in image.annotations.all %}
  annotations["{{ annotation.current_revision.revision_guid }}"] = {{ annotation.current_revision|json|safe }}
    {% endfor %}
  {% endif %}

  function displayAnnotation($el) {

    var annotation = $el.data('annotation-id');
    var revision = $el.data('revision-id');

    // Load the form for selected annotation via AJAX
    $.get('/comments/annotation/' + annotation + '/comment-form', { next: currentPath + '#' + annotation })
      .then(function(form) {

        $('.list-group a[data-annotation-id]').removeClass('active');
        $el.addClass('active');

        $('#form-comment form').replaceWith(form);

        vm.annotation = annotations[revision];

        location.hash = '#' + annotation;

      });
  }

  $('.list-group a[data-annotation-id]').on('click', function(e) {
    e.preventDefault();
    var $el = $(e.currentTarget);
    displayAnnotation($el);
  });

  vm.$refs.annotator.$on('save', function(data) {
    $('#form-annotation').find('input[name="title"]').val(data.title);
    $('#form-annotation').find('input[name="description"]').val(data.description);
    $('#form-annotation').find('input[name="fragment"]').val(data.fragment);

    var tags = data.tags.map(function(tag) {
      return {
        tag_input: (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link : tag.tag_label,
        tag_label: tag.tag_label,
        accuracy: tag.accuracy,
        relevancy: tag.relevancy
      }
    })
    $('#form-annotation').find('input[name="tags"]').val(JSON.stringify(tags));
    $('#form-annotation').submit();
  })

  $('.list-group a[data-annotation-id] .close').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();

    var $target = $(e.currentTarget);
    $target.closest('.list-group-item').removeClass('active');

    vm.annotation = null;

    $('#form-comment form').find('textarea, [type="submit"]').attr('disabled', true);

    location.hash = '';
  });

  function router () {
    var url = location.hash.slice(1);
    if (url.length) {
      var annotation = url;
      var $el = $('.list-group a[data-annotation-id="'+annotation+'"]');
      displayAnnotation($el);
    }
  }
  // window.addEventListener('hashchange', router);
  window.addEventListener('load', router);

</script>
{% endblock %}