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

{% block nav_title %}Home{% endblock %}
{% block title %}Home | {{ site_name }}{% endblock %}
{% block content %}
    <x-frame style="--width: 768px">
        <h1>{{ site_name }}</h1>
        <p>
            Free/libre/open image data for machine learning, computer vision, data science, research, and more.
        </p>
        <p>Some actions you can do:</p>
        <ul>
            <li><a href="/upload">Upload a picture (but you must log in first)</a></li>
            <li><a href="/object/">List of objects</a></li>
            <li><a href="/query-pictures">Query the dataset</a></li>
        </ul>
        <h2>Random pictures</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>
                </li>
            {% endfor %}
        </ul>
    </x-frame>
{% endblock %}