{% load thumbnail %}
{% load iconolab_tags %}

<div class="item-image-container">

  {% with item.images_sorted_by_name as images_list %}
  {% with images_list.0 as first_image %}

    <div class="main-image">
      {% thumbnail first_image.media "250x250" crop=False as im %}
        <a href="{% url 'image_detail' item.collection.name first_image.image_guid %}">
          <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
        </a>
      {% endthumbnail %}

      {% is_bookmarked first_image as is_bookmarked %}

      {% if request.user.is_authenticated %}
      <a href="#" class="bookmark {% if is_bookmarked %}active{% endif %}"
        title="{% if is_bookmarked %}Ajouté à vos favoris{% else %}Ajouter à mes favoris{% endif %}"
        data-item="{{ item.metadatas.natural_key }}"
        data-image-id="{{ first_image.id }}"
        data-image-guid="{{ first_image.image_guid }}">
          <span class="fa-stack fa-lg">
            <i class="fa fa-star fa-stack-1x"></i>
            <i class="fa fa-star-o fa-stack-1x"></i>
          </span>
        </a>
      {% endif %}
    </div>

    {% if images_list|length > 1 %}
    <div class="other-images">
    {% for image in images_list %}
      {% if image != first_image %}
        {% thumbnail image.media "100x100" crop=False as im %}
        <a href="{% url 'image_detail' item.collection.name image.image_guid %}">
          <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
        </a>
        {% endthumbnail %}
      {% endif %}
    {% endfor %}
    </div>
    {% endif %}

    <p class="item-image-stats">
      <span title="{{ first_image.stats.views_count }} vues">
        <i class="fa fa-eye"></i> {{ first_image.stats.views_count }}
      </span>
      <span title="{{ first_image.stats.annotations_count }} annotations">
        <i class="fa fa-pencil-square-o"></i> {{ first_image.stats.annotations_count }}
      </span>
      <span title="{{ first_image.stats.comments_count }} commentaires">
        <i class="fa fa-comments"></i> {{ first_image.stats.comments_count }}
      </span>
      <span title="{{ first_image.stats.tag_count }} mots-clés">
        <i class="fa fa-tags"></i> {{ first_image.stats.tag_count }}
      </span>
    </p>

  {% endwith %}
  {% endwith %}

</div>