eric / rustwarden

{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block navbar %}
{% include "components/navbar.html" %}
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8" x-data="fediversePage" data-saved="{% if saved_flash %}true{% else %}false{% endif %}">

    <nav class="text-sm breadcrumbs mb-6" aria-label="breadcrumb">
        <ul>
            <li><a href="/">{{ breadcrumb_home }}</a></li>
            <li><a href="/admin">{{ breadcrumb_admin }}</a></li>
            <li><a href="/admin/fediverse">{{ breadcrumb_federation }}</a></li>
            <li aria-current="page">{{ breadcrumb_self }}</li>
        </ul>
    </nav>

    {% include "components/admin_tabs.html" %}

    <header class="mb-8">
        <h1 class="text-3xl font-bold mb-2">{{ heading }}</h1>
        <p class="text-base-content/70">{{ subtitle }} <span class="font-mono">{{ team_name }}</span></p>
    </header>

    <div
        x-show="saved"
        x-transition
        role="status"
        aria-live="polite"
        class="alert alert-success mb-6"
    >
        <span>{{ saved_toast }}</span>
    </div>

    {# Add form #}
    <section class="card bg-base-100 shadow-xl mb-8" aria-labelledby="add-legend">
        <div class="card-body">
            <h2 id="add-legend" class="card-title text-xl mb-4">{{ add_form_legend }}</h2>
            <form method="POST" action="/admin/fediverse/invites/{{ team_id }}/add" class="space-y-4">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

                <div class="form-control">
                    <label class="label" for="invite-handle">
                        <span class="label-text font-semibold">{{ handle_label }}</span>
                    </label>
                    <input
                        id="invite-handle"
                        type="text"
                        name="handle"
                        required
                        autocomplete="off"
                        autocapitalize="off"
                        spellcheck="false"
                        pattern="^@?[A-Za-z0-9._-]+@[A-Za-z0-9.-]+$"
                        class="input input-bordered w-full max-w-md"
                        placeholder="{{ handle_placeholder }}"
                    >
                </div>

                <div class="form-control">
                    <label class="label" for="invite-role">
                        <span class="label-text font-semibold">{{ role_label }}</span>
                    </label>
                    <select id="invite-role" name="role" required class="select select-bordered w-full max-w-md">
                        <option value="member">{{ role_member }}</option>
                        <option value="admin">{{ role_admin }}</option>
                        <option value="owner">{{ role_owner }}</option>
                    </select>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="btn btn-primary">{{ add_button }}</button>
                </div>
            </form>
        </div>
    </section>

    {# Table or empty state #}
    {% if has_rows %}
    <section class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <div class="overflow-x-auto">
                <table class="table table-zebra">
                    <thead>
                        <tr>
                            <th>{{ table_handle }}</th>
                            <th>{{ table_role }}</th>
                            <th>{{ table_status }}</th>
                            <th>{{ table_created_at }}</th>
                            <th class="text-right">{{ table_actions }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in rows %}
                        <tr>
                            <td class="font-mono">{{ row.invited_handle }}</td>
                            <td><span class="badge badge-ghost">{{ row.role }}</span></td>
                            <td>
                                {% if row.status == "pending" %}
                                <span class="badge badge-warning">{{ row.status }}</span>
                                {% else if row.status == "accepted" %}
                                <span class="badge badge-success">{{ row.status }}</span>
                                {% else if row.status == "rejected" || row.status == "revoked" || row.status == "expired" %}
                                <span class="badge badge-error">{{ row.status }}</span>
                                {% else %}
                                <span class="badge">{{ row.status }}</span>
                                {% endif %}
                            </td>
                            <td class="text-base-content/70">{{ row.created_at }}</td>
                            <td class="text-right">
                                {% if row.status == "pending" || row.status == "accepted" %}
                                <button
                                    type="button"
                                    class="btn btn-sm btn-ghost text-error"
                                    @click="revokeTarget = '{{ row.id }}|{{ row.invited_handle }}'"
                                    aria-haspopup="dialog"
                                >
                                    {{ revoke_button }}
                                </button>
                                {% else %}
                                —
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </section>
    {% else %}
    <section class="card bg-base-200 shadow-inner" aria-label="empty-state">
        <div class="card-body items-center text-center py-16">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-base-content/30 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
            <h3 class="text-lg font-semibold">{{ empty_title }}</h3>
            <p class="text-base-content/70 max-w-md">{{ empty_body }}</p>
        </div>
    </section>
    {% endif %}

    {# Revoke modal #}
    <dialog
        class="modal"
        :class="{ 'modal-open': revokeTarget !== null }"
        role="alertdialog"
        aria-labelledby="revoke-title"
    >
        <div class="modal-box">
            <h3 id="revoke-title" class="font-bold text-lg">{{ revoke_confirm_title }}</h3>
            <p class="py-4">
                {{ revoke_confirm_body }}
                <span class="font-mono block mt-2" x-text="revokeHandle()"></span>
            </p>
            <form method="POST" action="/admin/fediverse/invites/{{ team_id }}/revoke" class="modal-action">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="id" :value="revokeTarget ? revokeTarget.split('|')[0] : ''">
                <button type="button" class="btn btn-ghost" @click="revokeTarget = null">{{ modal_cancel }}</button>
                <button type="submit" class="btn btn-error">{{ modal_confirm }}</button>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button type="button" @click="revokeTarget = null" aria-label="close">close</button>
        </form>
    </dialog>
</div>
{% endblock %}