{% 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-content">

      <div style="position:relative" class="{% if large_image %}large-{% endif %}image-detail">

      {% if large_image %}

        {% thumbnail annotation.image.media "450x450" 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 %}

      {% else %}

        {% 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 %}

      {% 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 'annotation_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 %}