{% extends "repo.html" %}
{% set active_page = "users" %}

{% block title %}
    Users of {{ username }}/{{ repository }}
{% endblock %}
{% block content %}
<x-vbox>
    <x-frame style="--width: 896px;" class="flexible-space">
        <x-vbox>
            {% for relationship in relationships %}
                <article class="card card-horizontal">
                    <figure class="branch-icon">
                        <a href="/{{ relationship.user.username }}">
                            <img src="/info/{{ relationship.user.username }}/avatar" style="width: 48px; height: 48px;">
                        </a>
                    </figure>
                    {% if user_relationship.accessLevel == 2 %}
                        <section class="card-main flexible-space">
                            <h3>{{ relationship.user.username }}</h3>
                            {% if relationship.user.username == username %}
                                Administrator / Owner
                            {% else %}
                                <form method="post">
                                    <input type="hidden" name="update-username" value="{{ relationship.user.username }}">
                                    <x-hbox>
                                        <select id="update-level" name="update-level">
                                            <option value="-1">Remove</option>
                                            <option value="0" {% if relationship.accessLevel == 0 %}selected{% endif %}>
                                                {% if repoData.visibility %}
                                                    Contributor
                                                {% else %}
                                                    Read-only
                                                {% endif %}
                                            </option>
                                            <option value="1" {% if relationship.accessLevel == 1 %}selected{% endif %}>Read-write</option>
                                            <option value="2" {% if relationship.accessLevel == 2 %}selected{% endif %}>Administrator</option>
                                        </select>
                                        <button type="submit">Update</button>
                                    </x-hbox>
                                </form>
                            {% endif %}
                        </section>
                    {% else %}
                        <section class="card-main flexible-space">
                            <h3>{{ relationship.user.username }}</h3>
                            {% if relationship.user.username == username %}
                                Administrator / Owner
                            {% elif relationship.accessLevel == 0 %}
                                {% if repo.visibility %}
                                    Contributor
                                {% else %}
                                    Read-only
                                {% endif %}
                            {% elif relationship.accessLevel == 1 %}
                                Read-write
                            {% elif relationship.accessLevel == 2 %}
                                Administrator
                            {% endif %}
                        </section>
                    {% endif %}
                </article>
            {% endfor %}
            {% if user_relationship.accessLevel == 2 %}
                <form method="POST">
                    <x-hbox style="align-items: flex-end;">
                        <x-vbox class="nopad flexible-space">
                            <label for="new-username">Username</label>
                            <input id="new-username" name="new-username" required>
                        </x-vbox>
                        <x-vbox class="nopad">
                            <label for="new-level">Level</label>
                            <select id="new-level" name="new-level" required>
                                {% if repo.visibility == 0 %}
                                    <option value="0">Read-only</option>
                                {% endif %}
                                <option value="1">Read-write</option>
                                <option value="2">Administrator</option>
                            </select>
                        </x-vbox>
                        <button type="submit">Add</button>
                    </x-hbox>
                </form>
            {% endif %}
        </x-vbox>
    </x-frame>
</x-vbox>
{% endblock %}