{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}


{% block page_js %}
	<script src="{% static 'iconolab/js/dist/bundle.js' %}" type="text/javascript"></script>
{% endblock%}

{% block content %}
	<div id="drawing-zone" style="padding-top: 10px">

		<p class="pullright"><a href='javascript:;'>Retour</a></p>
		<div class='col-md-2'>
			<ul class='form-drawing-wrapper list-inline'>
				<p class='form-drawing pullright'><strong>Sélection</strong></p>
				<li @click="setRectangleMode" v-bind:class="{ 'selected': isRect }" class='pull-md-left drawingModeBtn'>Rect.</li>
				<li @click="setFreeMode" v-bind:class="{ 'selected': !isRect }" class='pull-md-left drawingModeBtn'>Libre</li>
			</ul>

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

				<li @click="save" class='pull-md-left drawingModeBtn'><i class='fa fa-plus'></i>Enregister</li>
			</ul>
		</div>
			
		<div class="col-md-8">
			<div id="iconolab-image-wrapper">
				{% thumbnail annotation.image.media "x800" crop="center" as im %}
    				<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
				{% endthumbnail %}
			</div>
		</div>

		<div class='col-md-2'>
			<div id='action-wrapper' style='display: none'>
				<a class='btn btn-link create'>> Créer le fragment</a>
				<a class='btn btn-link delete'>> Effacer la zone</a>
			</div>
		</div>

	</div>
{% endblock %}

{% block footer_js %}
	<script>
		var drawingVue = new Vue({
			el: '#drawing-zone',
			MODE_RECT: 'RECT',
			MODE_FREE: 'FREE', 

			data: {
				mode:"",
				isRect: true,
			},

			init: function () {
				this.mode = this.$options.MODE_RECT;
				this.drawingComponent = iconolab.initCutoutComponent({ 
					wrapperId: '#iconolab-image-wrapper',
 					actionWrapper: '#action-wrapper' 
				}); 
				
				console.log("mode", this.mode);

				this.drawingComponent.setMode(this.mode);
			},

			methods: {
				
				setRectangleMode: function () {
					this.mode = this.$options.MODE_RECT;
					this.isRect = true;
					this.drawingComponent.setMode(this.mode);
					console.log("mode", this.mode);
				},

				setFreeMode:  function () {
					this.mode = this.$options.MODE_FREE;
					this.isRect = false;
					this.drawingComponent.setMode(this.mode);
				},

				save: function () {
					console.log('drawingPath', this.drawingComponent.getPath());
				},

				clear: function () {
					this.drawingComponent.clear();
				}
			}
		}); 
	</script>
{% endblock %}