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

{% 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">
            <menu 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 %}
            </menu>
        </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 }}">
                            {{ annotation_display.annotation_display(picture.resource) }}
                            <div class="list-detail">
                                {{ picture.resource.title }}
                            </div>
                        </a>
                        <div class="list-more">
                            <span class="picture-author">by <a href="/profile/{{ picture.resource.author.username }}">{{ picture.resource.author.formatted_name }}</a></span>
                            <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 %}