{% extends "default.html" %}
{% import "small-annotation-display.html" as annotation_display %}

{% block nav_title %}Query results{% endblock %}
{% block title %}Picture query results | {{ site_name }}{% endblock %}

{% block content %}
    <x-frame style="--width: 768px" class="vbox">
        <h1>Picture query results</h1>
        <details>
            <summary>Query YAML</summary>
            <pre>{{ query }}</pre>
        </details>
        <p>
            Found {{ resources.total }} pictures.
        </p>
        <ul class="thumbnail-list">
            {% for resource in resources %}
                <li>
                    <a href="/picture/{{ resource.id }}">
                        {{ annotation_display.annotation_display(resource) }}
                        <div class="list-detail">
                            {{ resource.title }}
                        </div>
                    </a>
                    <div class="list-more">
                        <span class="picture-author">by <a href="/profile/{{ resource.author.username }}">{{ resource.author.formatted_name }}</a></span>
                    </div>
                </li>
            {% endfor %}
        </ul>
        {% include "pagination.html" %}
    </x-frame>
{% endblock %}