{% load thumbnail %}
{% load iconolab_tags %}
{% with annotation_data.annotation_obj as annotation %}
<li>
  <div class="panel panel-default annotation-panel">
    <div class="panel-heading">
      {% if annotation.current_revision.title %}
        {{annotation.current_revision.title}}
      {% else %}
        <i>Annotation sans titre</i>
      {% endif %}
    </div>
    <div class="panel-body">
      <div style="position:relative" class="{% if large_image %}large-{% endif %}image-detail">
      {% if large_image %}
        {% thumbnail annotation.image.media "400x400" crop=False as im %}
          <a href="{% url 'image_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 %}
      {% else %}
        {% thumbnail annotation.image.media "150x150" crop=False as im %}
        <a href="{% url 'image_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 %}
      {% endif %}
      </div>
      <div class="annotation-detail">
        <dl class="dl-horizontal">
          <dt>Total commentaires : </dt>
          <dd><span class="badge">{{annotation.stats.comments_count}}</span></dd>
          <dt>.. Ecrits par {{user.username}} : </dt>
          <dd><span class="badge badge-warning">{{annotation_data.comment_count_for_user}}</span></dd>
          <dt>A commenté le : </dt>
          <dd>{{annotation_data.latest_comment_date}}</dd>
        </dl>
        <a class="btn btn-default btn-sm userpage-annotation-btn pull-left" href="{% url 'image_detail' annotation.image.item.collection.name annotation.image.image_guid %}#{{ annotation.annotation_guid }}">Voir annotation</a>
      </div>
      {% if with_stats %}
      <div class="stats-annotation-userpage">
        {% include "partials/annotation_stats_panel.html" with annotation=annotation label="Statistiques sur cette annotation:" %}
      </div>
      {% endif %}
    </div>
  </div>
</li>
{% endwith %}