{% load lucide ui %}

{% comment %}
    Club-scoped admins, and the modals to add one / confirm removing one. Included with
    `club`, `admins`, `admin_form` already in context.
{% endcomment %}
<div class="card flex flex-col">
    <div class="flex items-center justify-between border-b border-line px-4 py-3">
        <span class="font-display text-sm font-extrabold tracking-[.1em] text-ink uppercase">Club admins</span>
        <button class="btn btn-primary btn-sm gap-2" type="button" onclick="document.getElementById('club_admin_add_modal').showModal()">{% lucide "user-plus" size=14 %} Add admin</button>
    </div>
    <div class="overflow-x-auto">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for role in admins %}
                    <tr>
                        <td class="font-semibold text-ink">{{ role.member }}</td>
                        <td class="font-mono text-xs text-muted">{{ role.member.user.email|default:"—" }}</td>
                        <td class="text-right">
                            <button class="btn btn-outline btn-xs gap-1" type="button" onclick="document.getElementById('{{ role.pk|dom_id:"admin_remove_modal" }}').showModal()">{% lucide "trash-2" size=12 %} Remove</button>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="3" class="text-center text-muted">No admins yet.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% url 'controlpanel:club_admin_add' club.pk as club_admin_add_url %}
{% include "controlpanel/_modal_form.html" with modal_id="club_admin_add_modal" title="Add admin" form=admin_form action_url=club_admin_add_url submit_label="Grant admin" submit_icon="user-plus" blurb="A club admin can manage everything in this club. They will be required to set up two-factor authentication before they can sign in." %}

{% comment %} Dialogs live outside the table: <tbody> may only contain <tr> elements. {% endcomment %}
{% for role in admins %}
    {% url 'controlpanel:club_admin_remove' club.pk role.pk as admin_remove_url %}
    {% include "controlpanel/_confirm_modal.html" with modal_id=role.pk|dom_id:"admin_remove_modal" title="Remove admin" body="Remove "|add:role.member.get_full_name|add:" as an admin of this club? They keep their membership — only admin rights are revoked." action_url=admin_remove_url submit_label="Remove" %}
{% endfor %}