{% extends 'base.html' %}

{% block content %}
<div class="row mt-4">
    <div class="col">
        <h1 class="text-center display-4">Editing group: {{ groupname }}</h1>
    </div>
</div>
<div class="text-center border-bottom pb-3 mb-1">
    <a class="btn btn-outline-danger"
        href="{{ url_for('usermanager.group_delete', groupname=groupname) }}"
        role="button"
    ><i class="bi-x-square"></i> Delete Group</a>
</div>
<div class="row">
    <div class="col-sm border border-primary rounded m-2">
        <table class="table align-middle" id="tableMembers">
            <thead>
                <tr>
                    <th scope="col" colspan="3" class="text-center">{{ groupname }}</th>
                </tr>
            </thead>
            <tbody>
                {% for user in members|sort %}
                <tr class="userEntry text-center" id="{{ user.username }}">
                    <th scope="row">
                        <a href="{{ url_for('usermanager.user_view', username=user.username)}}">
                            <img src="{{ user.get_thumbnail_url() }}"
                                 alt="Profile picture for user {{ user.username }}"
                                 class="img-fluid rounded"
                                 style="max-width: 50px"
                                 >
                        </a>
                    </th>
                    <td>
                        <a class="text-decoration-none fw-bold" href="{{ url_for('usermanager.user_view', username=user.username)}}">{{ user.username }}</a>
                    </td>
                    <td>
                        <button type="button" class="toggleMembershipButton btn btn-danger">
                            <i class="bi-person-fill-dash"></i> Remove
                        </button>
                    </td>
                </tr>
                {%  endfor %}
            </tbody>
        </table>
    </div>
    <div class="col-sm border rounded m-2">
        <table class="table align-middle" id="tableNonMembers">
            <thead>
                <tr>
                    <th scope="col" colspan="3" class="text-center">Other Users</th>
                </tr>
            </thead>
            <tbody>
                {% for user in non_members|sort %}
                <tr class="userEntry text-center" id="{{ user.username }}">
                    <th scope="row">
                        <a href="{{ url_for('usermanager.user_view', username=user.username)}}">
                            <img src="{{ user.get_thumbnail_url() }}"
                                 alt="Profile picture for user {{ user.username }}"
                                 class="img-fluid rounded"
                                 style="max-width: 50px"
                                 >
                        </a>
                    </th>
                    <td>
                        <a class="text-decoration-none fw-bold" href="{{ url_for('usermanager.user_view', username=user.username)}}">{{ user.username }}</a>
                    </td>
                    <td>
                        <button type="button" class="toggleMembershipButton btn btn-success">
                            <i class="bi-person-fill-add"></i> Add
                        </button>
                    </td>
                </tr>
                {%  endfor %}
            </tbody>
        </table>
    </div>
</div>
<script src="{{ url_for('static', filename='js/group_edit.js') }}"></script>
{% endblock content %}
