{% 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|dictsort:"pk" %}
          <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 class="btn btn-default btn-sm" href="{% url 'annotation_create' collection_name image.image_guid %}"><i class="fa fa-plus"></i> Annoter cette image</a>
            <br><br>
          </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-default btn-sm" 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($(this).attr("id"))[1];
	    $(".item-detail-image-block").hide();
	    $(".item-detail-image-block").removeClass("selected");
	    $(".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 %}