{% extends 'iconolab_base.html' %} 
{% load staticfiles %} 
{% load thumbnail %} 
{% block content %}
<div id="annotation-wrapper" class="row" style="border: 1px solid gray">
  <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 class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
        <a 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">
      </fieldset>
      <fieldset class="form-group">
        <label class="control-label">Description: </label>
        &nbsp;
        <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
        <a 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>
      </fieldset>
      <fieldset class="form-group">
        <label class="control-label">Tags: </label>
        &nbsp;
        <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
        <a class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        <typeahead id="merge-current-revision-tags" :tags="{{ current_tags_data  }}"></typeahead>
      </fieldset>
      <label>Image: </label><br>
      <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">
    <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 class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
        <a 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="{{parent_revision.title}}" readonly="readonly">
      </fieldset>
      <fieldset class="form-group">
        <label class="control-label">Description: </label>
        &nbsp;
        <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
        <a class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        <textarea id="merge-parent-revision-description" class="form-control"
           readonly="readonly">{{ parent_revision.description}}</textarea>
      </fieldset>
      <fieldset class="form-group">
        <label class="control-label">Tags: </label>
        &nbsp;
        <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
        <a class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        <typeahead id="parent-comment" :tags="{{ current_tags_data  }}"></typeahead>
      </fieldset>
      <label>Image: </label><br>
      <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 class="col-md-4">
    <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 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 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 :tags="{{ tags_data  }}"></typeahead>
      </fieldset>
      <label class="control-label" for="id_{{ form.tags.name }}">Image: </label><br>
      <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 type="hidden" name="tags" value="[]"></input>
      <input v-model="normalizePath" type="hidden" name="fragment" value=";FREE"></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>
{% endblock %} 

{% block footer_js %} 
<script>
	$(".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 %}