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

{% block nav_title %}{{ object.id }}{% endblock %}
{% block title %}Object {{ object.id }} | {{ site_name }}{% endblock %}

{% block content %}
    <x-frame style="--width: 768px">
        <h1>{{ object.id }}</h1>
        <p>{{ object.description }}</p>
        <h2>Supersets</h2>
        {% if object.parent_links %}
            <ul>
                {% for parent in object.parent_links %}
                    {% set superset = parent.parent %}
                    <li><a href="/object/{{ superset.id }}">{{ superset.id }}</a></li>
                {% endfor %}
            </ul>
        {% else %}
            <p>This object has no supersets.</p>
        {% endif %}
        {% if object.child_links %}
            <h2>Subsets</h2>
            <ul>
                {% for child in object.child_links %}
                    {% set subset = child.child %}
                    <li><a href="/object/{{ subset.id }}">{{ subset.id }}</a></li>
                {% endfor %}
            </ul>
        {% else %}
            <p>This object has no subsets.</p>
        {% endif %}
        <h2>Pictures with this object</h2>
        <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 %}