{% extends "default.html" %}

{% block title %}Users of {{ gallery.title }} | {{ site_name }}{% endblock %}

{% block content %}
    <x-frame style="--width: 768px" class="vbox">
        <h1>Users: {{ gallery.title }}</h1>
        <p>{{ gallery.description }}</p>
        {% if have_permission %}
            <form class="buttonbox" method="POST" action="/gallery/{{ gallery.id }}/users/add">
                <input name="username" type="text" placeholder="Username" required aria-label="Username">
                <button type="submit">Add user</button>
            </form>
            <form class="buttonbox" method="POST" action="/gallery/{{ gallery.id }}/users/remove">
                <input name="username" type="text" placeholder="Username" required aria-label="Username">
                <button type="submit">Remove user</button>
            </form>
        {% endif %}
        <p>Besides the owner, these users can also add and remove resources from this gallery:</p>
        <ul>
            {% for user in gallery.users %}
                <li><a href="/user/{{ user.user.username }}">{{ user.user.formatted_name }}</a></li>
            {% endfor %}
        </ul>
    </x-frame>
{% endblock %}