{% load i18n %}

{% if groups %}
<div class="table-responsive">
    <table class="table table-hover align-middle">
        <thead class="table-light">
            <tr>
                <th>{% trans "Name" %}</th>
                <th>{% trans "Members" %}</th>
                <th>{% trans "Auth Groups" %}</th>
                <th class="text-end">{% trans "Actions" %}</th>
            </tr>
        </thead>
        <tbody>
            {% for group in groups %}
            <tr>
                <td class="fw-bold">{{ group.name }}</td>
                <td>
                    {% for member in group.members.all|slice:":5" %}
                        <span class="badge bg-info rounded-pill me-1 mb-1">{{ member.username }}</span>
                    {% endfor %}
                    {% if group.members.count > 5 %}
                        <span class="badge bg-secondary rounded-pill mb-1">+{{ group.members.count|add:"-5" }} {% trans "more" %}</span>
                    {% endif %}
                    {% if not group.members.count %}
                        <span class="text-muted small">{% trans "No members" %}</span>
                    {% endif %}
                </td>
                <td>
                    {% for g in group.groups.all|slice:":5" %}
                        <span class="badge bg-secondary rounded-pill me-1 mb-1">{{ g.name }}</span>
                    {% endfor %}
                    {% if group.groups.count > 5 %}
                        <span class="badge bg-secondary rounded-pill mb-1">+{{ group.groups.count|add:"-5" }} {% trans "more" %}</span>
                    {% endif %}
                    {% if not group.groups.count %}
                        <span class="text-muted small">{% trans "None" %}</span>
                    {% endif %}
                </td>
                <td class="text-end text-nowrap">
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary me-2"
                            data-bs-toggle="modal"
                            data-bs-target="#groupUsersModal"
                            hx-get="{% url 'aa_kanban:edit_group' group.pk %}"
                            hx-target="#groupUsersModalBody"
                            title="{% trans 'Edit Group Name' %}">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button type="button"
                            class="btn btn-sm btn-outline-primary me-2"
                            data-bs-toggle="modal"
                            data-bs-target="#groupUsersModal"
                            hx-get="{% url 'aa_kanban:group_users_modal' group.pk %}"
                            hx-target="#groupUsersModalBody"
                            title="{% trans 'Manage Access' %}">
                        <i class="fas fa-users-cog"></i>
                    </button>
                    <button type="button"
                            class="btn btn-sm btn-outline-danger"
                            hx-post="{% url 'aa_kanban:delete_group' group.pk %}"
                            hx-target="#group-list-container"
                            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                            hx-confirm="{% trans 'Are you sure you want to delete this group?' %}"
                            title="{% trans 'Delete Group' %}">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p class="text-muted text-center py-4">{% trans "No groups have been created yet." %}</p>
{% endif %}