--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/iconolab/templates/iconolab/detail_item.html	Thu Jul 21 11:03:14 2016 +0200
@@ -0,0 +1,63 @@
+{% extends 'iconolab_base.html' %}
+
+{% load staticfiles %}
+
+{% load thumbnail %}
+
+{% load iconolab_tags %}
+
+{% block content %}
+<div class="row">
+	<div class="col-md-6">
+        {% for image in item.images.all %}
+          <div id="img-{{image.image_guid}}" class="item-detail-image-block {% if forloop.first %}selected{% endif %}">
+    		{% thumbnail image.media "500x500" crop=False as im %}
+  			   <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
+    		{% endthumbnail %}
+            <br>
+            <br><a href="{% url 'annotation_create' collection_name image.image_guid %}"><i class="fa fa-plus"></i> Créer une nouvelle annotation sur cette image</a>
+          </div>
+        {% endfor %}    
+    </div>
+    <div class="col-md-6">
+        <h2>{{item.metadatas.title}}</h2>
+        <h4>Description: </h3>
+        <p>{{item.metadatas.description}}</p><br>
+        {% if item.images.all.count > 1 %}
+          <h4>Autres images pour cet objet: </h3>
+          {% for image in item.images.all %}
+              {% thumbnail image.media "150x150" crop=False as im_small %}
+                <img class="item-image-thumbnail" id="thumb-{{image.image_guid}}" src="{{ im_small.url }}" width="{{ im_small.width }}" height="{{ im_small.height }}">
+              {% endthumbnail %}
+          {% endfor %} 
+          <br><br>
+        {% endif %}
+        <a class="btn btn-link" href="{% url 'collection_home' collection_name %}"><i class="fa fa-list"></i> Retour à la liste d'objets</a>
+    </div>
+      {% for image in item.images.all %}  
+      <div id="annotations-{{image.image_guid}}" class="col-md-12 image-annotations-list">
+        {% include "partials/image_annotations_list.html" with annotation_list=image.annotations.all image_guid=image.image_guid %}  
+      </div>
+      {% endfor %}  
+</div>
+{% endblock %}
+
+{% block footer_js %}
+<script>
+	$(".item-detail-image-block:not(.selected)").hide()
+	$(".image-annotations-list").hide()
+	var initialSelectedID = /img\-([0-9a-z\-]+)/.exec($(".item-detail-image-block.selected").attr("id"))[1];
+	$(".item-image-thumbnail#thumb-"+initialSelectedID).hide()
+	$(".image-annotations-list#annotations-"+initialSelectedID).show()
+	$(".item-image-thumbnail").on("click", function(e){
+	    imageID = /thumb\-([0-9a-z\-]+)/.exec($(e.target).attr("id"))[1];
+	    $(".item-detail-image-block").hide()
+	    $(".item-detail-image-block#img-"+imageID).show()
+	    $(".item-detail-image-block#img-"+imageID).addClass("selected")
+	    $(".item-image-thumbnail").show()
+		$(".item-image-thumbnail#thumb-"+imageID).hide()
+		$(".image-annotations-list").hide()
+		$(".image-annotations-list#annotations-"+imageID).show()
+	})
+</script>
+{% endblock %}
\ No newline at end of file