{% load thumbnail %}

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

  {% with item.images_sorted_by_name.first 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 %}
    </div>

    {% if item.images.count > 1 %}
    <div class="other-images">
    {% for image in item.images_sorted_by_name %}
      {% 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 %}

</div>