{% extends "default.html" %}
{% 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 }}">
                        <div class="annotation-zone">
                            <img src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
                            {% for region in resource.regions %}
                                {% if region.json.type == "bbox" %}
                                    <svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
                                        <rect x="{{ region.json.shape.x * resource.width }}"
                                              y="{{ region.json.shape.y * resource.height }}"
                                              width="{{ region.json.shape.w * resource.width }}"
                                              height="{{ region.json.shape.h * resource.height }}"
                                              fill="none" class="shape-bbox shape"
                                        ></rect>
                                    </svg>
                                {% elif region.json.type == "polygon" %}
                                    <svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
                                        <polygon points="{% for point in region.json.shape %}{{ point.x * resource.width }},{{ point.y * resource.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
                                    </svg>
                                {% elif region.json.type == "polyline" %}
                                    <svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
                                        <polyline points="{% for point in region.json.shape %}{{ point.x * resource.width }},{{ point.y * resource.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
                                    </svg>
                                {% elif region.json.type == "point" %}
                                    <svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
                                        <circle cx="{{ region.json.shape.x * resource.width }}" cy="{{ region.json.shape.y * resource.height }}" r="0" fill="none" class="shape-point shape"></circle>
                                    </svg>
                                {% endif %}
                            {% endfor %}
                        </div>
                        <div class="list-detail">
                            {{ resource.title }}
                        </div>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </x-frame>
{% endblock %}