{% extends base_template %}
{% load debusine %}
{% block content %}
    <h1>{{ title }}</h1>
    <p id="info-role">
        {% if role %}
            You have role <b>{{ role }}</b>.
        {% else %}
            You are not a member of this group.
        {% endif %}
    </p>
    {% if group.ephemeral %}
        <p id="info-ephemeral">The group will be automatically deleted when no longer used."</p>
    {% endif %}
    <h2>Users</h2>
    <table class="table table-sm" id="members">
        <thead>
            <tr>
                <th>{% widget pagination.columns.name %}</th>
                <th>Display name</th>
                <th>{% widget pagination.columns.role %}</th>
                {% if can_manage %}<th>Actions</th>{% endif %}
            </tr>
        </thead>
        <tbody>
            {% for gm in pagination.page_obj.object_list %}
                <tr>
                    <td>
                        {% if gm.user == user %}
                            <b>{{ gm.user.username }}</b> (you)
                        {% else %}
                            {{ gm.user.username }}
                        {% endif %}
                    </td>
                    <td>{{ gm.user.get_full_name }}</td>
                    <td>
                        {% if can_manage %}
                            <a href="{% url 'groups:update-member' group=group.name user=gm.user.username %}"><i class="bi bi-gear-fill"></i> {{ gm.role }}</a>
                        {% else %}
                            {{ gm.role }}
                        {% endif %}
                    </td>
                    {% if can_manage %}
                        <td>
                            <a class="btn btn-sm btn-danger"
                               href="{% url 'groups:remove-member' group=group.name user=gm.user.username %}">Remove</a>
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">{% widget pagination.page_navigation %}</td>
            </tr>
        </tfoot>
    </table>
    {% if can_manage %}
        <h2>Add user</h2>
        <form method="post" id="add-user-form">
            {% csrf_token %}
            {% for field in form %}
                <div class="row g-3 align-items-center">
                    <div class="col-auto">{{ field.label_tag }}</div>
                    <div class="col-auto">{{ field }}</div>
                    <div class="col-auto">{{ field.errors }}</div>
                    <div class="col-auto">
                        <button class="btn btn-primary" type="submit">Add</button>
                    </div>
                </div>
            {% endfor %}
        </form>
    {% endif %}
{% endblock %}
