{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% block content %}

	<div id="drawing-zone" class="row" style="padding-top: 10px; padding-bottom: 10px; border:1px solid orange">
		
		<div v-show='!formView' style="display:none" class="editor-wrapper col-md-12">
			<div class="col-md-12 no-padding">
				<p @click="cancel" class="pull-right btn btn-default btn-sm"><i class="fa fa-close"></i> Annuler</p>
			</div>
			<div class='col-md-2'>
				<ul class="form-drawing-wrapper list-inline">
					<p class='form-drawing pullright'><strong>Type de dessin</strong></p>
					<li @click="setDrawingMode('RECT')" v-bind:class="{ 'selected': isRect }" class='pull-md-right drawingModeBtn'>Rect.</li>
					<li @click="setDrawingMode('FREE')" v-bind:class="{ 'selected': !isRect }" class='pull-md-right drawingModeBtn'>Libre</li>
				</ul>

				{% thumbnail image.media "100x100" crop=False as im %}
					<zoomview ref="zoomview" :image-url="'{{ im.url }}'" :image-width="{{ im.width }}" :image-height="{{ im.height }}">
					</zoomview>
				{% endthumbnail %}

				<ul class='form-drawing-wrapper list-inline'>
					<p class='form-drawing pullright'><strong>Actions</strong></p>
					
					<li @click="clear" class='pull-md-right drawingModeBtn'><i class='fa fa-trash'></i> Effacer</li>

					<li id="confirm-fragment-button" @click="showForm" class='pull-md-right drawingModeBtn infos info'><i class='fa fa-plus'></i> Valider</li>
				</ul>
			</div>
			
			<div class="col-md-10">
				<div ref="image" id="iconolab-image-wrapper">
					{% with image.media as im %}
						<svg class="cut-canvas" width="850" height="850">
							<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>
	    					<path class="image-path" d="{% if annotation %}{{ annotation.current_revision.fragment }}{% endif %}"></path>
	    				</svg>
                    {% endwith %}
				</div>
			</div>
		</div>

		<div v-show="formView" class="col-md-12">
			
			<div class="col-md-6">
				<div class="small-image-wrapper" style="position: relative">
					{% thumbnail image.media "500x360" crop=False as im %}
						<svg ref="smallSvgWrapper" width="{{ im.width }}" height="{{ im.height }}" version="1.1">			
							<image ref="smallImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ im.url }}" x="0" y="0"  width="{{ im.width }}" height="{{ im.height }}"></image>
							<defs>
								<mask id="smallImage">
									<rect x="0" y="0" width="{{ im.width }}" height="{{ im.height }}" fill="white"/>
									<g v-bind:transform="transformMatrix">
										<path ref="currentPath" v-bind:d="fragmentPath"></path>
									</g>
								</mask>	
							</defs>

							<g v-show="!displayMask" v-bind:transform="transformMatrix">
								<path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
							</g>

							<rect v-show="displayMask" ref="smallMask" x="0" y="0" mask="url(#smallImage)" opacity="0.7" fill="white" width="{{ im.width }}" height="{{ im.height }}"></rect>
						</svg>

						<svg style="display:none" ref="zoomSvg" width="{{ im.width }}" height="{{ im.height }}" version="1.1">
							
							<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}"></image>

							<g v-bind:transform="transformMatrix">
								<path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
							</g>
						</svg>
					
					{% endthumbnail %}
				</div>
				<ul class="list-inline list-unstyled">
					<li @click="showEditor" class="showPointer btn btn-default btn-sm"> <i class='fa fa-edit'></i> Editer le fragment</li>
					<li v-show="!displayMask" @click="highLightZone" class="showPointer show-zone btn btn-default btn-sm"> <i class='fa fa-eye-slash'></i> Afficher la zone</li>
					<li v-show="displayMask" @click="highLightZone" class="showPointer hide-zone btn btn-default btn-sm"> <i class='fa fa-eye-slash'></i> Masquer la zone</li>
					<li class="zoom-link btn btn-default btn-sm" v-if="canZoom" @click="zoom('in')"><i class="fa fa-zoom-in"></i>Zoomer</li>
					<li class="zoom-link btn btn-default btn-sm" v-if="!canZoom" @click="zoom('out')"><i class="fa fa-zoom-out"></i>Dezoomer</li>
				</ul>
			</div>

			<div class='col-md-6' style="">
				 <form class="form" action="{% if annotation %}{% url 'annotation_edit' collection_name image_guid annotation_guid %}{% else %}{% url 'annotation_create' collection_name image_guid %}{% endif %}" method="POST">
				 	{% if form.non_field_errors %}
                        <div class="alert alert-danger" role="alert">
                          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                          <span class="sr-only">Erreur:</span>
                            {{ form.non_field_errors | striptags }}
                        </div>
                    {% else %}
                      {% if not annotation %}
                        <div class="alert alert-info" role="alert">
                          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                          <span class="sr-only">Info:</span>
                            Un de ces trois champs doit être non-vide: titre, description ou mots-clés.
                        </div>
                      {% endif %}
                    {% endif %}
          
                    {% if form.errors %}
                    <div id="errors" style="display: none;">
                        {% for field in form %}
                          {% if field.errors %}
                            * {{ field.name }}: {{ error|striptags }}
                          {% endif %}
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% csrf_token %}
                    <fieldset class="form-group {% if form.title.errors %}has-error{% endif %}">
                      <label class="control-label" for="id_{{ form.title.name }}">Titre</label>
                      {% if form.title.errors %}
                        <div class="alert alert-danger" role="alert">
                          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                          <span class="sr-only">Erreur:</span>
                            {{ form.title.errors | striptags }}
                        </div>
                      {% endif %}
                      <input type="text" class="form-control"
                        name="{{ form.title.name }}"
                        id="id_{{ form.title.name }}" value="{% if form.title.value %}{{ form.title.value}}{% endif %}">
                    </fieldset>
                    <fieldset class="form-group {% if form.description.errors %}has-error{% endif %}">
                      <label class="control-label" for="id_{{ form.description.name }}">Description</label>
                      {% if form.description.errors %}
                        <div class="alert alert-danger" role="alert">
                          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                          <span class="sr-only">Erreur:</span>
                            {{ form.description.errors | striptags }}
                        </div>
                      {% endif %}
                      <textarea class="form-control"
                        name="{{ form.description.name }}"
                        id="id_{{ form.description.name }}" >{% if form.description.value %}{{ form.description.value}}{% endif %}</textarea>
                    </fieldset>
                    <fieldset class="form-group">
                      <label class="control-label" for="id_{{ form.tags.name }}">Mots-Clés</label>
                      {% if form.tags.errors %}
                        <div class="alert alert-danger" role="alert">
                          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                          <span class="sr-only">Erreur:</span>
                            {{ form.tags.errors | striptags }}
                        </div>
                      {% endif %}
                      <typeahead :tags="{{ tags_data  }}"></typeahead>
                    </fieldset>

                    <fieldset class="form-group {% if form.comment.errors %}has-error{% endif %}">
                      <label class="control-label" for="id_{{ form.comment.name }}">Commentaire sur mon annotation</label>
                      {% if form.comment.errors %}
                        <div class="alert alert-danger" role="alert">
                          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                          <span class="sr-only">Erreur:</span>
                            {{ form.comment.errors | striptags }}
                        </div>
                      {% endif %}
                      <textarea class="form-control"
                        name="{{ form.comment.name }}"
                        id="id_{{ form.comment.name }}" >{% if not annotation %} Commentaire de création de mon annotation.{% endif %}</textarea>
                    </fieldset>
        			<input id="fragment-hidden-field" v-model="normalizePath" type="hidden" name="fragment"></input>
        			<button type="submit" class="save btn btn-default btn-sm">Enregister</button>
                    <a class="btn btn-default btn-sm" href="{% if annotation %}{% url 'annotation_detail' collection_name image_guid annotation_guid %}{% else %}{% url 'item_detail' collection_name image.item.item_guid %}{% endif %}" role="button">Retour</a>
    			    <br><br>
                </form>
			</div>
			
		</div>
	</div>

{% endblock %}

{% block footer_js %}
	<script>
		iconolab.Cutout.init();
		$(document).ready(function(){
		    if(($("#fragment-hidden-field").val()==";FREE")||!$("#fragment-hidden-field").val()){
		        $(".zoom-link, .show-zone, .hide-zone").hide()
			}
			$("#confirm-fragment-button").on("click", function(){
			    $("#fragment-hidden-field").trigger("change");
			});
			$("#fragment-hidden-field").on("change", function(){
			    if($(this).val()==";FREE"){
			        $(".zoom-link, .show-zone, .hide-zone").hide()
			    }
			    else {
			        $(".zoom-link, .show-zone").show() 
			    }
			}); 
		});
		
	</script>
{% endblock %}