{% 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>
		
		<div class="col-md-4">
			<div id="fragmentContainer">
			{% thumbnail annotation.image.media "100x100" crop="center" as im %}
    				<img src=" {{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
    		{% empty %}
    			<p>No image</p>
			{% endthumbnail %}
			</div>
		</div>

		<div class="col-md-4">

			<div id='iconolab-image' style='position:relative'>
				<img src="{% static annotation.image.media.url %}" 
				width="{{ annotation.image.width }}" 
				height="{{ annotation.image.height }}" />
				<!-- deal with path here -->
				<svg class='cut-canvas' style='border: 1px solid red;'></svg>
				<path class='image-path' d='M150 0 L75 200 L225 200 Z' />
			</div>

			<div sytle='border: 1px solid red; width: 300px; height:500px'>

				{% thumbnail annotation.image.media "100x100" crop="center" as im %}
    				<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
				{% endthumbnail %}

				<p>Test iri</p>
			</div>

		</div>

	</div>
{% endblock %}

{% block footer_js %}
	<script>
		iconolab.initCutoutComponent({ imageId: '#iconolab-image' });
	</script>
{% endblock %}