{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% load iconolab_tags %}

{% block content %}
  <div class="collection-summary" class="row">
    <div class="col-md-3">
      {% thumbnail collection.image "300x300" crop=False as im %}
        <img src="{{ im.url }}" class="img-responsive">
      {% endthumbnail %}
      <hr>
      <p>
        {{ collection.description | safe }}
      </p>
      {% if collection.folders.exists %}
        <h3>{{ collection.folders.count }} dossier{% if collection.folders.count > 1 %}s{% endif %}</h3>
        <ul class="list-unstyled">
        {% for folder in collection.folders.all %}
          <li>
            <p class="text-center">
              {% if folder_guid == folder.folder_guid|slugify %}
              <a href="{% url 'collection_home' collection_name %}">
                <i class="fa fa-close"></i> {{ folder.name }} ({{ folder.items_count }})
              </a>
              {% else %}
              <a href="{% url 'collection_home' collection_name %}?folder={{ folder.folder_guid|slugify }}">
                <i class="fa fa-folder"></i> {{ folder.name }} ({{ folder.items_count }})
              </a>
              {% endif %}
            </p>
            <p>
            {% thumbnail folder.image.media "250x250" crop=False as folder_image %}
              <a href="{% if folder_guid == folder.folder_guid|slugify %}{% url 'collection_home' collection_name %}{% else %}{% url 'collection_home' collection_name %}?folder={{ folder.folder_guid|slugify }}{% endif %}">
                <img src="{{ folder_image.url}}" width="100%" />
              </a>
            {% endthumbnail %}
            </p>
          </li>
        {% endfor %}
        </ul>
      {% endif %}
    </div>
    <div class="col-md-9">
      <h1>{{ collection.verbose_name }} <small>Fonds Iconolab</small></h1>

      {% if contributions_pagination_data.list %}
        <h3>Appels à contribution</h3>
        {% for annotation in contributions_pagination_data.list %}
        <div class="row">
          <div class="col-md-4">
            <div class="fragment-container" style="position: relative">
              {% thumbnail annotation.image.media "250x250" crop=False as im %}
                <a href="{% url 'annotation_detail' collection_name annotation.image.image_guid annotation.annotation_guid %}">
                  <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                  <svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
                    <g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
                      <path d="{{ annotation.current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
                    </g>
                  </svg>
                </a>
              {% endthumbnail %}
            </div>
          </div>
          <div class="col-md-8">
            <h4>{{ annotation.current_revision.title }}</h4>
            <p>
            {% for contributor in annotation.stats.contributors %}
              {{ contributor }}
            {% endfor %}
            <p>
            <p>{{ annotation.current_revision.description }}</p>
            {% for tagging_info in annotation.current_revision.tagginginfo_set.all %}
              <p>
                <span class="label label-default"><i class="fa fa-tag"></i> {{ tagging_info.tag.label }}</span>
                <span><i class="fa fa-exclamation-triangle"></i> {{ tagging_info.accuracy }}</span>
                <span><i class="fa fa-crosshairs"></i> {{ tagging_info.relevancy }}</span>
              </p>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      {% endif %}

      <ul class="nav nav-tabs" role="tablist">
        <li id="tab-items" role="presentation" class="{% if active_list == 'items' %}active{% endif %}">
          <a href="#list-items" role="tab" data-toggle="tab">Objets du fonds</a>
        </li>
        <li id="tab-revised" role="presentation" class="pull-right {% if active_list == 'revised' %}active{% endif %}">
          <a href="#list-revised" role="tab" data-toggle="tab">Annotations les plus révisées</a>
        </li>
        <li id="tab-recent" role="presentation" class="pull-right {% if active_list == 'recent' %}active{% endif %}">
          <a href="#list-recent" role="tab" data-toggle="tab">Annotations récentes</a>
        </li>
      </ul>

      <div class="tab-content">

        <div id="list-recent" role="tabpanel" class="tab-pane {% if active_list == 'recent' %}active{% endif %}">
          {% include "partials/image_annotations_list.html" with annotation_list=recent_pagination_data.list %}
          {% if recent_list %}
            {% include "partials/collection_home_pagination_links.html" with pagination_data=recent_pagination_data list_identifier="recent" %}
          {% endif %}
        </div>
        <div id="list-revised" role="tabpanel" class="tab-pane {% if active_list == 'revised' %}active{% endif %}">
          {% include "partials/image_annotations_list.html" with annotation_list=revised_pagination_data.list %}
          {% if revised_list %}
            {% include "partials/collection_home_pagination_links.html" with pagination_data=revised_pagination_data list_identifier="revised" %}
          {% endif %}
        </div>
        <div id="list-items" role="tabpanel" class="tab-pane {% if active_list == 'items' %}active{% endif %}">
          <div class="item-grid">
            {% for item in items_pagination_data.list %}
            <div class="item-grid-item">
              {% include "partials/item_images_preview.html" with item=item %}
            </div>
            {% endfor %}
          </div>

          <div id="pagination" class="text-center">
            {% include "partials/collection_home_pagination_links.html" with pagination_data=items_pagination_data list_identifier="items" %}
          </div>

        </div>

      </div>

    </div>
  </div>
{% endblock %}