{% 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">
        {% if item.metadatas.designation %}<h3>Désignation: <small>{{item.metadatas.designation}}</small></h3>{% endif %}
        {% if item.metadatas.authors %}<h4>Auteur(s): <small>{{item.metadatas.designation}}</small></h4>{% endif %}
        {% if item.metadatas.conservation_location %}<h4>Conservé à: <small>{{item.metadatas.conservation_location}}</small></h4>{% endif %}
        {% if item.metadatas.datation %}<h4>Datation: <small>{{item.metadatas.datation}}</small></h4>{% endif %}
        {% if item.metadatas.technics %}<h5>Techniques: <small>{{item.metadatas.technics}}</small></h5>{% endif %}
        {% if item.metadatas.measurements %}<h5>Mesures: {{item.metadatas.measurements}}</h5>{% endif %}
        {% if item.metadatas.create_or_usage_location %}<h5>Lieu de création/utilisation: <small>{{item.metadatas.create_or_usage_location}}</small></h5>{% endif %}
        {% if item.metadatas.discovery_context %}<h5>Contexte de découverte: <small>{{item.metadatas.discovery_context}}</small></h5>{% endif %}
        {% if item.metadatas.photo_credits %}<h5>Crédits photographique: <small>{{item.metadatas.photo_credits}}</small></h5>{% endif %}
        {% if item.metadatas.inventory_number %}<h5>Numéro d'inventaire: <small>{{item.metadatas.inventory_number}}</small></h5>{% endif %}
        {% if item.metadatas.joconde_ref %}<h5><a href="{{item.metadatas.get_joconde_url}}">Cet objet dans Joconde</a></h5>{% endif %}
        <br>
        {% if item.images.all.count > 1 %}
          <h4>Autres images pour cet objet: </h4>
          {% 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 %}
        {% for image in item.images.all %}
          <div class="item-stats-container" id="stats-{{image.image_guid}}">
              {% include "partials/image_stats_panel.html" with image=image label="Statistiques sur cette image:" %} 
          </div>
        {% endfor %}
        
        
        <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 header="Annotation de l'image" %}  
      </div>
      {% endfor %}  
</div>
{% endblock %}

{% block footer_js %}
<script>
	$(".item-detail-image-block:not(.selected)").hide();
	$(".image-annotations-list").hide();
	$(".item-stats-container").hide();
	var initialSelectedID = /img\-([0-9a-z\-]+)/.exec($(".item-detail-image-block.selected").attr("id"))[1];
	$(".item-image-thumbnail#thumb-"+initialSelectedID).hide();
	$(".item-stats-container#stats-"+initialSelectedID).show();
	$(".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-stats-container").hide();
	    $(".item-stats-container#stats-"+imageID).show();
	    $(".item-image-thumbnail").show();
		$(".item-image-thumbnail#thumb-"+imageID).hide();
		$(".image-annotations-list").hide();
		$(".image-annotations-list#annotations-"+imageID).show();
	})
</script>
{% endblock %}