{% extends "default.html" %}

{% block title %}Gallery {{ gallery.title }} | {{ site_name }}{% endblock %}

{% block content %}
    <x-frame style="--width: 768px" class="vbox">
        <h1>{{ gallery.title }}</h1>
        <p>{{ gallery.description }}</p>
        <p>
            <a href="/gallery/{{ gallery.id }}/users">Users</a> {% if have_permission %} |
            <a href="/gallery/{{ gallery.id }}/edit">Edit</a>{% endif %}
        </p>
        {% if have_permission %}
            <form class="buttonbox" method="POST" action="/gallery/{{ gallery.id }}/add-picture">
                <input name="picture_id" type="text" placeholder="Picture ID" required aria-label="Picture ID">
                <button type="submit">Add picture</button>
            </form>
            <details>
                <summary>Add from query</summary>
                <form method="POST" action="/gallery/{{ gallery.id }}/add-pictures-from-query">
                    <label>
                        <span class="required-asterisk">Query YAML</span>
                        <textarea name="query" required rows="8"></textarea>
                    </label>
                    <button type="submit">Add pictures</button>
                </form>
            </details>
        {% endif %}
        <h2>Pictures</h2>
        <ul class="thumbnail-list">
            {% for picture in gallery.pictures %}
                <li>
                    <a href="/picture/{{ picture.resource.id }}">
                        <div class="annotation-zone">
                            <img src="/raw/picture/{{ picture.resource.id }}" alt="{{ picture.resource.title }}">
                            {% for region in picture.resource.regions %}
                                {% if region.json.type == "bbox" %}
                                    <svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
                                        <rect x="{{ region.json.shape.x * picture.resource.width }}"
                                              y="{{ region.json.shape.y * picture.resource.height }}"
                                              width="{{ region.json.shape.w * picture.resource.width }}"
                                              height="{{ region.json.shape.h * picture.resource.height }}"
                                              fill="none" class="shape-bbox shape"
                                        ></rect>
                                    </svg>
                                {% elif region.json.type == "polygon" %}
                                    <svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
                                        <polygon points="{% for point in region.json.shape %}{{ point.x * picture.resource.width }},{{ point.y * picture.resource.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
                                    </svg>
                                {% elif region.json.type == "polyline" %}
                                    <svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
                                        <polyline points="{% for point in region.json.shape %}{{ point.x * picture.resource.width }},{{ point.y * picture.resource.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
                                    </svg>
                                {% elif region.json.type == "point" %}
                                    <svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
                                        <circle cx="{{ region.json.shape.x * picture.resource.width }}" cy="{{ region.json.shape.y * picture.resource.height }}" r="0" fill="none" class="shape-point shape"></circle>
                                    </svg>
                                {% endif %}
                            {% endfor %}
                        </div>
                        <div class="list-detail">
                            {{ picture.resource.title }}
                        </div>
                    </a>
                    <div class="list-more">
                        <form action="/gallery/{{ gallery.id }}/remove-picture" method="POST">
                            <input type="hidden" name="picture_id" value="{{ picture.resource.id }}">
                            <button type="submit" class="button-flat">Remove</button>
                        </form>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </x-frame>
{% endblock %}