{% extends 'base.html' %}

{% block content %}
<div class="text-center mb-2">
    <h1 class="display-1">Groups</h1>
</div>
<div class="text-center border-bottom pb-4 mb-1">
    <a class="btn btn-primary"
        href="{{ url_for('usermanager.group_create') }}"
        role="button"
    ><i class="bi-people"></i> Create a new group</a>
</div>
{% if groups %}
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Group Name</th>
                <th scope="col">Number of Members</th>
            </tr>
        </thead>
        <tbody>
            {% for group in groups | sort %}
            <tr class="clickable" onclick="window.location='{{ url_for('usermanager.group_update', groupname=group.groupname) }}'" style="cursor: pointer">
                <th scope="row">
                    <a class="text-decoration-none fw-bold fs-4" href="{{ url_for('usermanager.group_update', groupname=group.groupname) }}">{{ group.groupname }}</a>
                </th>
                <td class="align-middle fs-5">
                    {{ group.members|length }}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="text-center">
    <p class="text-muted">There are currently no groups.</p>
</div>
{% endif %}
{% endblock content %}
