{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% load iconolab_tags %}

{% block content %}
<div id="item-detail" class="row">
	<div class="col-md-6">
        {% for image in images|dictsort:"obj.pk" %}
          <div id="img-{{image.obj.image_guid}}" class="item-detail-image-block {% ifequal image.obj.image_guid|stringformat:'s' display_image %}selected{% endifequal %}">
    		{% thumbnail image.obj.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.obj.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.field %}<h4>Domaine : <small>{{item.metadatas.field}}</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 photographiques : <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}}" target="_blank">Cet objet dans Joconde</a></h5>{% endif %}
        <br>
        {% if images|length > 1 %}
          <h4>Autres images pour cet objet: </h4>
          {% for image in images %}
              {% thumbnail image.obj.media "150x150" crop=False as im_small %}
                <img class="item-image-thumbnail" id="thumb-{{image.obj.image_guid}}" src="{{ im_small.url }}" width="{{ im_small.width }}" height="{{ im_small.height }}">
              {% endthumbnail %}
          {% endfor %} 
          <br><br>
        {% endif %}
        {% for image in images %}
          <div class="item-stats-container" id="stats-{{image.obj.image_guid}}">
              {% include "partials/image_stats_panel.html" with image=image.obj 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 images %}  
      <div id="annotations-{{image.obj.image_guid}}" class="col-md-12 image-annotations-list">
        {% include "partials/image_annotations_list.html" with annotation_list=image.annotations header="Annotation de l'image" %}  
        {% if image.annotations %}
        <ul class="pagination pull-right img-ann-{{image.obj.guid}}-perpage" style="margin-left: 15px;">
          <li class="active pagination-label"><a>Annotations par page : </a></li>
          <li class="{% if image.annotations.paginator.per_page == 5 %}active{% endif %}">
            <a {% if image.annotations.paginator.per_page != 5 %}href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page=1&perpage=5"{% endif %}>5</a>
          </li>
          <li class="{% if image.annotations.paginator.per_page == 10 %}active{% endif %}">
            <a {% if image.annotations.paginator.per_page != 10 %}href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page=1&perpage=10"{% endif %}>10</a>
          </li>
          <li class="{% if image.annotations.paginator.per_page == 25 %}active{% endif %}">
            <a {% if image.annotations.paginator.per_page != 25 %}href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page=1&perpage=25"{% endif %}>25</a>
          </li>
          <li class="{% if image.annotations.paginator.per_page == 100 %}active{% endif %}">
            <a {% if image.annotations.paginator.per_page != 100 %}href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page=1&perpage=100"{% endif %}>100</a>
          </li>
        </ul>
        {% if image.annotations.has_previous or image.annotations.has_next %}
          <ul class="pagination pull-right img-ann-{{image.obj.guid}}-pagination">
            {% if image.annotations.has_previous %}
            <li>
              <a href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page={{image.annotations.previous_page_number}}&perpage={{image.annotations.paginator.per_page}}" aria-label="Précédent">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            {% endif %}
            
            {% for page in image.annotations.paginator.page_range %}
              <li id="page-link-{{page}}" class="pagination-link {% if page == image.annotations.number %}active{% endif %}">
                <a {% if page != image.annotations.number %}href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page={{page}}&perpage={{image.annotations.paginator.per_page}}"{% endif %}>{{page}}</a>
              </li>
            {% endfor %}
            
            {% if image.annotations.has_next %}
            <li>
              <a href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page={{image.annotations.next_page_number}}&perpage={{image.annotations.paginator.per_page}}" aria-label="Suivant">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
            {% endif %}
          </ul>
        {% endif %}
      {% endif %}
      </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 %}