{% extends "management/base.html" %}
{% load i18n lucide ui %}

{% block heading %}{{ group.name }}{% endblock heading %}

{% block actions %}
    <a class="btn btn-outline gap-2" href="{% url 'management:group_update' group.pk %}">{% lucide "pencil" size=16 %} {% trans "Edit" %}</a>
{% endblock actions %}

{% block panel %}
    <div class="card card-body">
        <div class="flex flex-wrap items-center justify-between gap-2">
            <h2 class="card-title">{% trans "Members" %}</h2>
            <a class="btn btn-outline btn-sm gap-2" href="{% url 'management:group_bulk_add' group.pk %}">{% lucide "users" size=14 %} {% trans "Add multiple" %}</a>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>{% trans "Member" %}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for membership in memberships %}
                    <tr>
                        <td class="font-semibold text-ink"><a class="link link-hover" href="{% url 'management:member_detail' membership.member.pk %}">{{ membership.member }}</a></td>
                        <td class="text-right">
                            <button class="btn btn-xs btn-outline btn-error gap-1" type="button" onclick="document.getElementById('{{ membership.pk|dom_id:"remove_member_modal" }}').showModal()">{% lucide "user-minus" size=13 %} {% trans "Remove" %}</button>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="2" class="py-6 text-center text-muted">{% trans "No members yet." %}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% trans "Remove from group" as remove_member_title %}
    {% trans "Remove" as remove_label %}
    {% for membership in memberships %}
        {% blocktrans with member=membership.member group_name=group.name asvar remove_member_body %}Remove {{ member }} from “{{ group_name }}”?{% endblocktrans %}
        {% url 'management:group_member_remove' group.pk membership.pk as remove_member_url %}
        {% include "controlpanel/_confirm_modal.html" with modal_id=membership.pk|dom_id:"remove_member_modal" title=remove_member_title body=remove_member_body action_url=remove_member_url submit_label=remove_label submit_icon="user-minus" %}
    {% endfor %}
{% endblock panel %}