{% 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" class="mobile-padding">
        <h1>{{ site_name }}</h1>
        <p>
            Free/libre/open image data for machine learning, computer vision, data science, research, and more.
        </p>
        <p>
            Easy to contribute for everyone, powerful to get data for those who need it.
        </p>
        <menu class="action-list">
            <li><a href="/upload">
                <iconify-icon icon="mdi:camera"></iconify-icon>
                Upload a picture
            </a></li>
            <li><a href="/object/">
                <iconify-icon icon="mdi:flower"></iconify-icon>
                Browse objects
            </a></li>
            <li><a href="/query-pictures">
                <iconify-icon icon="mdi:search"></iconify-icon>
                Run a query
            </a></li>
            <li><a href="/query-pictures">
                <iconify-icon icon="mdi:help-circle"></iconify-icon>
                Help
            </a></li>
        </menu>
        <h2>Random pictures</h2>
        <ul class="thumbnail-list thumbnail-list-scroll">
            {% for resource in random_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>
        <h2>Latest unannotated pictures</h2>
        <ul class="thumbnail-list thumbnail-list-scroll">
            {% for resource in recent_unannotated_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>
        <h2>Latest pictures</h2>
        <ul class="thumbnail-list thumbnail-list-scroll">
            {% for resource in recent_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>
    </x-frame>
{% endblock %}