{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% load iconolab_tags %}

{% block content %}
<h2>{{collection.verbose_name}}</h2><br>

<ul class="nav nav-tabs">
  <li id="tab-recent" role="presentation" {% if recent_annotations %} class="active" {% endif %}><a class="collection-home-tab" id="show-recent">Annotations récentes</a></li>
  <li id="tab-revised" role="presentation"><a class="collection-home-tab" id="show-revised">Annotations les plus révisées</a></li>
  <li id="tab-contribution" role="presentation"><a class="collection-home-tab" id="show-contribution">Appels à contribution</a></li>
  <li id="tab-items" role="presentation" class="{% if not recent_annotations %}active{% endif %} pull-right"><a class="collection-home-tab" id="show-items">Objets du fonds {{collection.verbose_name}}</a></li>
</ul>

<div id="list-recent" class="recent-ann-wrapper collection-home-block {% if recent_annotations %}selected{% endif %}">
  {% include "partials/image_annotations_list.html" with annotation_list=recent_annotations.all %}
</div>

<div id="list-revised" class="revised-ann-wrapper collection-home-block">
  {% include "partials/image_annotations_list.html" with annotation_list=revised_annotations.all %}
</div>

<div id="list-contribution" class="contribution-ann-wrapper collection-home-block">
  {% include "partials/image_annotations_list.html" with annotation_list=contribution_calls_annotations_list %}
</div>

<div id="list-items" class="collection-home-block {% if not recent_annotations %}selected{% endif %}">
<ul class="image-list-wrapper list-inline">
  {% for item in collection.items.all %}
  <li class="image-list-li small-image-wrapper panel panel-default">
    <div class="image-container text-center image-list-image-container">
    {% with item.images.first as image %}
      {% thumbnail image.media "350x300" crop=False as im %}
        <div class="object-infos">
          <a class="btn btn-default btn-xs collection-home-item-btn" href="{% url 'item_detail' collection_name item.item_guid %}"><i class="fa fa-eye"></i> Détail de l'objet</a>
        </div>
        <div>
        <a href="{% url 'item_detail' collection_name item.item_guid %}">
          <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
        </a>
        </div>
      {% endthumbnail %}
    {% endwith %}
   </li>
{% endfor %}
</ul>
</div>

{% endblock %}

{% block footer_js %}
<script>
  $(".collection-home-block:not(.selected)").hide();
  $(".collection-home-tab").click(function(){
      $(".collection-home-tab").parent().removeClass("active");
      $(this).parent().addClass("active");
      clickedTab = /show\-([0-9a-z\-]+)/.exec($(this).attr("id"))[1];
      $(".collection-home-block").hide();
      $("#list-"+clickedTab).show();
  })
</script>
{% endblock %}