RosterChief/controlpanel/templates/controlpanel/admins.html

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

{% block panel_title %}Admins{% endblock panel_title %}

{% block breadcrumb %}
    <span class="text-ink">admins</span>
    <span class="text-edge">|</span>
    <span>{{ admins|length }} platform admin{{ admins|length|pluralize }}</span>
{% endblock breadcrumb %}

{% block actions %}
    <button class="btn btn-primary gap-2" type="button" onclick="document.getElementById('admin_add_modal').showModal()">{% lucide "user-plus" size=16 %} Grant access</button>
{% endblock actions %}

{% block panel %}
    {% url 'controlpanel:admin_add' as admin_add_url %}
    {% include "controlpanel/_modal_form.html" with modal_id="admin_add_modal" title="Grant platform access" form=admin_form action_url=admin_add_url submit_label="Grant access" submit_icon="user-plus" blurb="Platform admins can manage every club. They must set up two-factor authentication before they can sign in." %}

    <div class="card">
        <div class="border-b border-line px-4 py-3">
            <span class="font-display text-sm font-extrabold tracking-[.1em] text-ink uppercase">Platform admins</span>
        </div>
        <div class="overflow-x-auto">
            <table class="table">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Staff</th>
                        <th>Superuser</th>
                        <th>Last login</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for admin in admins %}
                        <tr class="{% if admin.pk == user.pk %}bg-row-focus{% endif %}">
                            <td>
                                <div class="font-medium text-ink">{{ admin.email }}</div>
                                {% if admin.pk == user.pk %}
                                    <span class="mt-0.5 inline-flex w-fit items-center gap-1 rounded-full border border-edge bg-white px-2 py-0.5 font-mono text-[10px] tracking-[.06em] text-muted uppercase">
                                        {% lucide "badge-check" size=10 %} That's you
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <form method="post" action="{% url 'controlpanel:admin_update' admin.pk %}">
                                    {% csrf_token %}
                                    <input type="hidden" name="is_staff" value="{% if admin.is_staff %}0{% else %}1{% endif %}">
                                    <input type="hidden" name="is_superuser" value="{% if admin.is_superuser %}1{% else %}0{% endif %}">
                                    <button
                                        class="inline-flex h-[22px] w-10 items-center rounded-full px-[3px] transition-colors {% if admin.is_staff %}justify-end bg-ok{% else %}justify-start bg-edge{% endif %}"
                                        type="submit"
                                        aria-pressed="{% if admin.is_staff %}true{% else %}false{% endif %}"
                                        aria-label="Toggle staff access for {{ admin.email }}"
                                    >
                                        <span class="h-4 w-4 rounded-full bg-white shadow"></span>
                                    </button>
                                </form>
                            </td>
                            <td>
                                <form method="post" action="{% url 'controlpanel:admin_update' admin.pk %}">
                                    {% csrf_token %}
                                    <input type="hidden" name="is_staff" value="{% if admin.is_staff %}1{% else %}0{% endif %}">
                                    <input type="hidden" name="is_superuser" value="{% if admin.is_superuser %}0{% else %}1{% endif %}">
                                    <button
                                        class="inline-flex h-[22px] w-10 items-center rounded-full px-[3px] transition-colors {% if admin.is_superuser %}justify-end bg-warn{% else %}justify-start bg-edge{% endif %}"
                                        type="submit"
                                        aria-pressed="{% if admin.is_superuser %}true{% else %}false{% endif %}"
                                        aria-label="Toggle superuser access for {{ admin.email }}"
                                    >
                                        <span class="h-4 w-4 rounded-full bg-white shadow"></span>
                                    </button>
                                </form>
                            </td>
                            <td class="font-mono text-[11px] text-muted">{{ admin.last_login|date:"j M Y"|default:"Never" }}</td>
                            <td class="text-right">
                                <button class="btn btn-outline btn-error btn-sm gap-1" type="button" onclick="document.getElementById('{{ admin.pk|dom_id:"admin_revoke_modal" }}').showModal()">{% lucide "user-minus" size=14 %} Revoke</button>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="5" class="text-center text-muted">No platform admins.</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% comment %} Dialogs live outside the table: <tbody> may only contain <tr> elements. {% endcomment %}
        {% for admin in admins %}
            {% url 'controlpanel:admin_revoke' admin.pk as admin_revoke_url %}
            {% include "controlpanel/_confirm_modal.html" with modal_id=admin.pk|dom_id:"admin_revoke_modal" title="Revoke platform access" body="Revoke platform access for "|add:admin.email|add:"? They will no longer be able to reach the control panel." action_url=admin_revoke_url submit_label="Revoke" submit_icon="user-minus" %}
        {% endfor %}
    </div>
{% endblock panel %}