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

{% block nav_title %}{{ user.formatted_name }}{% endblock %}
{% block title %}{{ user.formatted_name }}'s profile | {{ site_name }}{% endblock %}

{% block content %}
    <x-frame style="--width: 768px" class="vbox">
        <h1>{{ user.formatted_name }}</h1>
        <p>Joined: {{ user.joined_timestamp }}</p>
        <h2>Pictures</h2>
        <ul class="thumbnail-list">
            {% for resource in user.pictures %}
                <li>
                    <a href="/picture/{{ resource.id }}">
                        {{ annotation_display.annotation_display(resource) }}
                        <div class="list-detail">
                            {{ resource.title }}
                        </div>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </x-frame>
{% endblock %}