{% extends 'iconolab_base.html' %}
{% load staticfiles %}
{% load thumbnail %}
{% load iconolab_tags %}
{% block content %}



<div id="merge-tool" class="row">
  <mergetool inline-template>
    <div class="wrapper">

      <div class="col-md-4">
        <h4>Révision courante
        <a id="merge-current-revision-info-icon" class="btn btn-default btn-xs btn-revision-info" title="Plus d'info"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a>
        </h4>
        <div id="merge-current-revision-alert" class="alert alert-warning revision-info-alert">
          Cette révision est la révision actuellement publiée pour l'annotation.
        </div>

        <form class="form">

          <fieldset class="form-group">
            <label class="control-label">Titre :</label>
            &nbsp;
            <a @click="showDiffviewer('cur_title_diff','merge-current-revision-title', 'title')" class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
            <a @click="pickProposition($event, 'merge-current-revision-title', 'title')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
            <input type="text" class="form-control"
              id="merge-current-revision-title"
              value="{{current_revision.title}}" readonly="readonly"/>
            <diffviewer ref="cur_title_diff"></diffviewer>
          </fieldset>

          <fieldset class="form-group">
            <label class="control-label">Description : </label>
            &nbsp;
            <a @click="showDiffviewer('cur_desc_diff','merge-current-revision-description', 'desc')" class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
            <a  @click="pickProposition($event, 'merge-current-revision-description', 'desc')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
            <textarea class="form-control"
              id="merge-current-revision-description" readonly="readonly">{{ current_revision.description}}</textarea>
            <diffviewer ref="cur_desc_diff"></diffviewer>
          </fieldset>

          <fieldset class="form-group">
            <label class="control-label">Mots-clés : </label>
            &nbsp;
            <a @click="showDiffviewer('cur_tag_diff','current-tags','tag')" class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
            <a  @click="pickTag($event, 'current-tags')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
            <typeahead ref="current-tags" read-only="1" id="merge-current-revision-tags" :tags="{{ current_tags_data  }}"></typeahead>
            <diffviewer ref="cur_tag_diff"></diffviewer>
          </fieldset>

          <label>Image: </label>
          &nbsp;
             <a @click="showDiffviewer('cur_frag_diff','merge-current-revision-fragment','frag')" class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>

            <a @click="pickProposition($event, 'merge-current-revision-fragment', 'frag')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>

          <br>
          <fieldset>
            {% thumbnail image.media "100x100" crop=False as im %}
              <svg width="{{ im.width }}" height="{{ im.height }}">
                <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 data-path-type="{{ current_revision.fragment|path_type }}" id="merge-current-revision-fragment" d="{{ current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
                </g>
              </svg>
              <diffviewer ref="cur_frag_diff" image-height={{ im.height }} image-width={{ im.width }} image-path="{{ im.url }}" transform-matrix="{% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %}"></diffviewer>
            {% endthumbnail %}
          </fieldset>

          <label>Commentaire de création: </label>
          <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 {{ current_revision.author }} <br> le {{ current_revision.created|date:"d/m/Y" }} à {{ current_revision.created|time:"H:i" }}</b><br>
              <i class="fa fa-quote-left" aria-hidden="true"></i> {{ current_comment.comment }} <i class="fa fa-quote-right" aria-hidden="true"></i>
          </div>
        </form>
      </div>

      <div class="col-md-4 revision-proposal">
        <h4>Révision proposée</h4>
        <form class="form" action="{% url 'annotation_merge' collection_name image_guid annotation_guid revision_guid %}" method="POST">
        {% if merge_form.errors %}
          <div id="errors" style="display: none;">
              {% for field in merge_form %}
                {% if field.errors %}
                  * {{ merge_form.name }}: {{ error|striptags }}
                {% endif %}
              {% endfor %}
          </div>
          {% endif %}
          {% csrf_token %}
          <fieldset class="form-group {% if merge_form.title.errors %}has-error{% endif %}">
            <label class="control-label" for="id_{{ merge_form.title.name }}">Titre </label>
            {% if merge_form.title.errors %}
              <div class="alert alert-danger" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>
                  {{ merge_form.title.errors | striptags }}
              </div>
            {% endif %}
            <input ref="proposal-title" type="text" class="form-control"
              name="{{ merge_form.title.name }}"
              id="id_{{ merge_form.title.name }}" value="{% if merge_form.title.value %}{{ merge_form.title.value}}{% endif %}">
          </fieldset>
          <fieldset class="form-group {% if merge_form.description.errors %}has-error{% endif %}">
            <label class="control-label" for="id_{{ merge_form.description.name }}">Description : </label>
            {% if merge_form.description.errors %}
              <div class="alert alert-danger" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>
                  {{ form.description.errors | striptags }}
              </div>
            {% endif %}
            <textarea ref="proposal-description" class="form-control"
              name="{{ merge_form.description.name }}"
              id="id_{{ merge_form.description.name }}" >{% if merge_form.description.value %}{{ merge_form.description.value}}{% endif %}</textarea>
          </fieldset>
          <fieldset class="form-group">
            <label class="control-label" for="id_{{ form.tags.name }}">{{ merge_form.tags.label }}: </label>
            <typeahead ref="proposal-tags" id="proposal-tags" read-only="1" :tags="{{ proposal_tags_data  }}"></typeahead>
          </fieldset>

          <label class="control-label" for="id_{{ form.tags.name }}">Image: </label><br>

          <div>
            {% thumbnail image.media "100x100" crop=False as im %}
              <svg width="{{ im.width }}" height="{{ im.height }}">
                <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 data-path-type="{{ proposal_revision.fragment|path_type }}" ref="proposal-fragment" d="{{ proposal_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
                </g>
              </svg>
            {% endthumbnail %}
          </div>


          <label>Commentaire de création: </label>
          <div id="merge-proposal-revision-comment" 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 {{ proposal_revision.author }} <br> le {{ proposal_revision.created|date:"d/m/Y" }} à {{ proposal_revision.created|time:"H:i" }}</b><br>
              <i class="fa fa-quote-left" aria-hidden="true"></i> {{ proposal_comment.comment }} <i class="fa fa-quote-right" aria-hidden="true"></i>
          </div>
          <fieldset class="form-group {% if merge_form.comment.errors %}has-error{% endif %}">
            <label class="control-label" for="id_{{ merge_form.comment.name }}">Commentaire de révision:</label>
            {% if merge_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>
                  {{ merge_form.comment.errors | striptags }}
              </div>
            {% endif %}
            <textarea class="form-control"
              name="{{ merge_form.comment.name }}"
              id="id_{{ merge_form.comment.name }}" ></textarea>
          </fieldset>
          <input ref="fragment-field" type="hidden" name="fragment" value="{{proposal_revision.fragment}}"></input>
          <button type="submit" class="save btn btn-default btn-sm">Enregister</button>
                <a class="btn btn-default btn-sm" href="{% url 'revision_detail' collection_name image_guid annotation_guid revision_guid %}" role="button">Retour</a>
          <br><br>
        </form>
      </div>

      <div class="col-md-4">
        <h4>Révision parente
          <a id="merge-parent-revision-info-icon" class="btn btn-default btn-xs btn-revision-info" title="Plus d'info"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a>
        </h4>
        <div id="merge-parent-revision-alert" class="alert alert-warning revision-info-alert">
          Cette révision est la révision à partir de laquelle l'annotation proposée a été créée.

          {% if parent_revision.revision_guid == current_revision.revision_guid %}<br><b>Note:  Dans ce cas précis, cette révision est identique à la révision courante. </b>{% endif %}
        </div>
        <form class="form">
          <fieldset class="form-group">
            <label class="control-label">Titre :</label>
            &nbsp;
            <a @click="pickProposition($event, 'merge-parent-revision-title', 'title')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
            <a @click="showDiffviewer('parent_title_diff','merge-parent-revision-title', 'title')" class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>


            <input type="text" class="form-control"
              id="merge-parent-revision-title"
              value="{{parent_revision.title}}" readonly="readonly">
              <diffviewer ref="parent_title_diff"></diffviewer>
          </fieldset>
          <fieldset class="form-group">
            <label class="control-label">Description : </label>
            &nbsp;
            <a @click="pickProposition($event, 'merge-parent-revision-description', 'desc')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
            <a @click="showDiffviewer('parent_desc_diff','merge-parent-revision-description', 'desc')" class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
            <textarea id="merge-parent-revision-description" class="form-control"
               readonly="readonly">{{ parent_revision.description}}</textarea>
            <diffviewer ref="parent_desc_diff"></diffviewer>
          </fieldset>
          <fieldset class="form-group">
            <label class="control-label">Mots-clés : </label>
            &nbsp;
            <a  @click="pickTag($event, 'parent-tags')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
            <a @click="showDiffviewer('parent_tag_diff','parent-tags','tag')" class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
            <typeahead ref="parent-tags" read-only="1" id="merge-parent-revision-tags" :tags="{{ parent_tags_data  }}"></typeahead>

            <diffviewer ref="parent_tag_diff"></diffviewer>
          </fieldset>

          <fieldset>
            <label>Image: </label>
              &nbsp;
              <a @click="pickProposition($event, 'merge-parent-revision-fragment', 'frag')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
              <a @click="showDiffviewer('parent_frag_diff','merge-parent-revision-fragment','frag')" class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
            <br>
              {% thumbnail image.media "100x100" crop=False as im %}
                <svg width="{{ im.width }}" height="{{ im.height }}">
                  <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 data-path-type="{{ parent_revision.fragment|path_type }}" id="merge-parent-revision-fragment" d="{{ parent_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
                  </g>
                </svg>
                 <diffviewer ref="parent_frag_diff" image-height={{ im.height }} image-width={{ im.width }} image-path="{{ im.url }}" transform-matrix="{% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %}"></diffviewer>
              {% endthumbnail %}
          </fieldset>

          <label>Commentaire de création: </label>
          <div id="merge-parent-revision-comment" 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 {{ parent_revision.author }} <br> le {{ parent_revision.created|date:"d/m/Y" }} à {{ parent_revision.created|time:"H:i" }}</b><br>
              <i class="fa fa-quote-left" aria-hidden="true"></i> {{ parent_comment.comment }} <i class="fa fa-quote-right" aria-hidden="true"></i>
          </div>
        </form>
      </div>

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

{% block footer_js %}
<script>
  new Vue({

      el: "#merge-tool",
      mounted () {
        console.log(iconolab);
      },
      methods: {
        click: function () {
          alert("ssd");
        }
      },

      components: {
        'mergetool': iconolab.VueComponents.MergeTool
      }

    });

	$(".revision-info-alert").hide()
	$(".btn-revision-info").click(function(event){
	    relatedAlertID = /([a-zA-Z\-]+)-info-icon/.exec($(this).attr("id"))[1]+"-alert";
	    $("#"+relatedAlertID).slideToggle()
	});
</script>
{% endblock %}