{% extends 'base.html' %}

{% block content %}
<div class="row mt-4">
    <div class="col text-center">
        <h1 class="display-3">Create a new Group</h1>
    </div>
</div>
<div class="row align-items-center border rounded m-2">
    <label for="groupNameInput" class="col-sm-2 col-form-label fw-bold text-center m-2">Group Name</label>
    <input type="text" class="col-sm form-control m-2" id="groupNameInput">
    <a class="col-sm-2 btn btn-outline-secondary m-2" href="{{ url_for('usermanager.group_list') }}" role="button">Cancel</a>
    <button class="col-sm-2 btn btn-primary m-2" type="button" id="createGroupButton">Create Group</button>
</div>
<div class="row border rounded m-2">
    <table class="table align-middle" id="tableMembers">
        <thead>
            <tr>
                <th class="text-center" scope="col" colspan="3">Members</th>
            </tr>
        </thead>
        <tbody>
            <tr class="text-center" id="emptyTableNotice">
                <th scope="row" colspan="3">
                    <p class="text-danger">You must add at least one member.</p>
                </th>
            </tr>
        </tbody>
    </table>
</div>
<div class="row border rounded mx-2 mb-2 mt-5">
    <table class="table align-middle" id="tableNonMembers">
        <thead>
            <tr>
                <th class="text-center" scope="col" colspan="3">Other Users</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users|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>
<script src="{{ url_for('static', filename='js/group_create.js') }}"></script>
{% endblock content %}