{% load thumbnail %}
{% load iconolab_tags %}
<li>
  <div class="panel panel-default annotation-panel">
      <div class="panel-heading">{{annotation.current_revision.title}}</div>
      
      <div class="fragment-container" style="position:relative; display:inline-block">
        {% thumbnail annotation.image.media "150x150" crop=False as im %}
          <a href="{% url 'annotation_detail' annotation.image.item.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 class="annotation-detail">
        <dl class="dl-horizontal">
          <dt>Commentaires: </dt>
          <dd><span class="badge">{{annotation.stats.comments_count}}</span></dd>
          <dt>Révisions en attente:</dt>
          <dd><span class="badge {% if annotation.stats.awaiting_revisions_count > 0 %}badge-warning{% endif %}">{{annotation.stats.awaiting_revisions_count}}</span></dd>
          <dt>Révisions acceptée:</dt>
          <dd><span class="badge">{{annotation.stats.accepted_revisions_count}}</span></dd>
        </dl>
      </div>
      <a class="btn btn-default btn-sm userpage-annotation-btn pull-right" href="{% url 'annotation_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}">Voir annotation</a>
  </div>
</li>