{% 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 %}
          <a href="{% url 'image_detail' collection_name image.obj.image_guid %}">
            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
          </a>
    		  {% endthumbnail %}
          </div>
        {% endfor %}
    </div>
    <div class="col-md-6">
        {% include "iconolab/metadatas/detail_item_metadatas.html" %}
        {% 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 %}