{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% load iconolab_tags %}

{% block content %}
  <div id="collection-summary" class="row collection-summary">
    <h1 class="collection-home-title text-center"><small>Fonds Iconolab</small> {{ collection.verbose_name }}</h1>
    <div class="col-md-3 pull-left">
      {% thumbnail collection.image "250x250" crop=False as im %}
        <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
      {% endthumbnail %}
    </div>
    <div class="col-md-9 description-container">
      
      <p id="collection-description-short-{{collection.name}}" class="text-justify collection-description"> 
        {{collection.description | safe}} 
        {% if collection.complete_description %}<a id="show-complete-{{collection.name}}" class="show-complete-link" @click="showCompleteDescription('{{collection.name}}')"> Voir plus</a>{% endif %}
      </p>
      <p id="collection-description-complete-{{collection.name}}" class="text-justify collection-description-complete">
        {{collection.complete_description | safe}} 
        <a id="hide-complete-{{collection.name}}" class="hide-complete-link" @click="hideCompleteDescription('{{collection.name}}')"> Voir moins</a>
      </p>
    </div>
  </div>
  <div id="collection-tabs" class="row tab-selector">
    <div class="col-md-12">
      <ul class="nav nav-tabs">
        <li id="tab-items" role="presentation" class="{% if active_list == 'items' %}active{% endif %}"><a class="collection-home-tab" id="show-items" @click="switchTab('items')">Objets du fonds {{collection.verbose_name}}</a></li>
        <li id="tab-contribution" role="presentation" class="pull-right {% if active_list == 'contributions' %}active{% endif %}"><a class="collection-home-tab" id="show-contribution" @click="switchTab('contribution')">Appels à contribution</a></li>
        <li id="tab-revised" role="presentation" class="pull-right {% if active_list == 'revised' %}active{% endif %}"><a class="collection-home-tab" id="show-revised" @click="switchTab('revised')">Annotations les plus révisées</a></li>
        <li id="tab-recent" role="presentation" class="pull-right {% if active_list == 'recent' %}active{% endif %}"><a class="collection-home-tab" id="show-recent" @click="switchTab('recent')">Annotations récentes</a></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div id="list-recent" class="recent-ann-wrapper collection-home-block col-md-12 {% if active_list == 'recent' %}selected{% endif %}">
      {% include "partials/image_annotations_list.html" with annotation_list=recent_list %}
      {% if recent_list %}
        {% include "partials/collection_home_pagination_links.html" with pagination_data=recent_pagination_data list_identifier="recent" %}
      {% endif %}
    </div>
  </div>
  <div class="row">
    <div id="list-revised" class="revised-ann-wrapper collection-home-block col-md-12 {% if active_list == 'revised' %}selected{% endif %}">
      {% include "partials/image_annotations_list.html" with annotation_list=revised_list %}
      {% if revised_list %}
        {% include "partials/collection_home_pagination_links.html" with pagination_data=revised_pagination_data list_identifier="revised" %}
      {% endif %}
    </div>
  </div>
  <div class="row">
    <div id="list-contribution" class="contributions-ann-wrapper collection-home-block col-md-12 {% if active_list == 'contributions' %}selected{% endif %}">
      {% include "partials/image_annotations_list.html" with annotation_list=contributions_list %}
      {% if contributions_list %}
        {% include "partials/collection_home_pagination_links.html" with pagination_data=contributions_pagination_data list_identifier="contributions" %}
      {% endif %}
    </div>
  </div>
  <div class="row">
    <div id="list-items" class="collection-home-block col-md-12 text-center {% if active_list == 'items' %}selected{% endif %}">
      <ul class="image-list-wrapper list-inline"> 
        {% for item in items_pagination_data.list %}
          <li class="image-list-li small-image-wrapper panel panel-default">
            <div class="object-infos text-center" style="margin-top: 10px;">
               <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>
            {% include "partials/item_images_preview.html" with item=item %}
          </li>
        {% endfor %}
      </ul>
      {% include "partials/collection_home_pagination_links.html" with pagination_data=items_pagination_data list_identifier="items" %}
    </div>
  </div>
{% endblock %}

{% block footer_js %}
<script>
  _descrVue = new Vue(iconolab.DescriptionViewer);
  _descrVue.$mount("#collection-summary");
  _tabsVue = new Vue(iconolab.TabSelector);
  _tabsVue.$mount("#collection-tabs");
</script>
{% endblock %}