{% extends "default.html" %}

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

{% block content %}

    <div id="picture-view">
        <x-frame id="picture-actions">
            <ul class="action-list">
                <li><a href="/gallery/{{ gallery.id }}/users">
                    <iconify-icon icon="mdi:user"></iconify-icon>Users
                </a></li>
                {% if have_extended_permission %}
                    <li><a href="/gallery/{{ gallery.id }}/edit">
                        <iconify-icon icon="mdi:edit"></iconify-icon>Edit
                    </a></li>
                {% endif %}
                {% if have_extended_permission %}
                    <li><details>
                        <summary>
                            <iconify-icon icon="mdi:delete"></iconify-icon>Delete
                        </summary>
                        <a href="/gallery/{{ gallery.id }}/delete">Confirm deletion</a>
                    </details></li>
                {% endif %}
            </ul>
        </x-frame>
        <x-frame style="--width: 768px" class="vbox">
            <h1>{{ gallery.title }}</h1>
            <p>owned by <a href="/profile/{{ gallery.owner.username }}">{{ gallery.owner.formatted_name }}</a></p>
            <p>{{ gallery.description }}</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 }}">
                                {% if have_permission %}
                                    <button type="submit" class="button-flat"><iconify-icon icon="mdi:close">Remove</iconify-icon></button>
                                {% endif %}
                            </form>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </x-frame>
    </div>
{% endblock %}