{% extends 'iconolab_base.html' %}

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

{% block content %}

    <h2>Recherche</h2>

    <form method="get" action=".">
        <table>
            
            <tr>
                <td> {{ form.as_p }} </td> 

                <td>
                    <input style="margin:0px" type="submit" value="Rechercher">
                </td>
            </tr>

        </table>

        {% if query %}
            
            <h3><strong>{{ page_obj.paginator.count }}</strong> annotation(s)</h3>
            
            {% for result in page_obj.object_list %}

            {% thumbnail result.object.image.media "400x400" crop=False as im %}
            <div class="annotation-item result" style="position:relative;">
            
            <a href="{% url 'annotation_detail' result.object.collection result.object.image.image_guid result.object.annotation_guid %}">
                <img 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="{{ result.object.current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
                  </g>
                </svg>
            </a>
            </div>
            {% endthumbnail %}

            <p>
                <a href="{{ result.object.get_absolute_url }}">{{ result.object.current_revision.title }}</a>
            </p>

            <div class="fragment-infos">
                <a class="btn btn-default btn-xs collection-home-btn" href="{% url 'annotation_detail' result.object.collection result.object.image.image_guid result.object.annotation_guid %}"><i class="fa fa-eye"></i> Voir l'annotation</a>
            </div>
            
            {% empty %}
                <p>Aucune annotation n'a été trouvée.</p>
            {% endfor %}

            {% if page_obj.has_previous or page_obj.has_next %}
                <div>
                    {% if page_obj.has_previous %}<a href="?q={{ query }}&amp;page={{ page_obj.previous_page_number }}">{% endif %}&laquo; Previous{% if page_obj.has_previous %}</a>{% endif %}
                    |
                    {% if page_obj.has_next %}<a href="?q={{ query }}&amp;page={{ page_obj.next_page_number }}">{% endif %}Next &raquo;{% if page_obj.has_next %}</a>{% endif %}
                </div>
            {% endif %}
        {% else %}
            {# Show some example queries to run, maybe query syntax, something else? #}
        {% endif %}
    </form>
{% endblock %}