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 %}">

    {# Breadcrumb (a11y P7: parent landmarks) #}
    <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" %}

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

    {# Save toast (Plan UI §3 P3) — auto-dismisses after 4 s #}
    <div
        x-show="saved"
        x-transition
        role="status"
        aria-live="polite"
        class="alert alert-success mb-6"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        <span>{{ saved_toast }}</span>
    </div>

    <form method="POST" action="/admin/fediverse/settings" class="space-y-6 max-w-3xl">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        {# Card: Activation #}
        <section class="card bg-base-100 shadow-xl" aria-labelledby="card-activation">
            <div class="card-body">
                <h2 id="card-activation" class="card-title text-xl mb-4">{{ card_activation }}</h2>
                <label class="label cursor-pointer justify-start gap-4" for="fediverse_enabled">
                    <input
                        id="fediverse_enabled"
                        type="checkbox"
                        name="fediverse_enabled"
                        value="true"
                        class="checkbox checkbox-primary"
                        {% if settings.fediverse_enabled == "true" %}checked{% endif %}
                    >
                    <span class="flex flex-col">
                        <span class="label-text font-semibold">{{ enabled_label }}</span>
                        <span class="label-text-alt text-base-content/60">{{ enabled_desc }}</span>
                    </span>
                </label>
            </div>
        </section>

        {# Card: Trust mode #}
        <section class="card bg-base-100 shadow-xl" aria-labelledby="card-trust">
            <div class="card-body">
                <h2 id="card-trust" class="card-title text-xl mb-4">{{ card_trust }}</h2>
                <label class="label" for="fediverse_trust_mode">
                    <span class="label-text font-semibold">{{ trust_mode_label }}</span>
                </label>
                <select
                    id="fediverse_trust_mode"
                    name="fediverse_trust_mode"
                    class="select select-bordered w-full max-w-md"
                >
                    <option value="allowlist" {% if settings.fediverse_trust_mode == "allowlist" %}selected{% endif %}>
                        {{ trust_mode_allowlist }}
                    </option>
                    <option value="open_with_blocklist" {% if settings.fediverse_trust_mode == "open_with_blocklist" %}selected{% endif %}>
                        {{ trust_mode_open }}
                    </option>
                </select>
            </div>
        </section>

        {# Card: Interop scope #}
        <section class="card bg-base-100 shadow-xl" aria-labelledby="card-interop">
            <div class="card-body">
                <h2 id="card-interop" class="card-title text-xl mb-4">{{ card_interop }}</h2>
                <label class="label" for="fediverse_interop_scope">
                    <span class="label-text font-semibold">{{ interop_scope_label }}</span>
                </label>
                <select
                    id="fediverse_interop_scope"
                    name="fediverse_interop_scope"
                    class="select select-bordered w-full max-w-md"
                >
                    <option value="rustwarden_only" {% if settings.fediverse_interop_scope == "rustwarden_only" %}selected{% endif %}>
                        {{ interop_scope_rustwarden_only }}
                    </option>
                    <option value="rustwarden_plus_universal_read" {% if settings.fediverse_interop_scope == "rustwarden_plus_universal_read" %}selected{% endif %}>
                        {{ interop_scope_rustwarden_plus }}
                    </option>
                    <option value="open" {% if settings.fediverse_interop_scope == "open" %}selected{% endif %}>
                        {{ interop_scope_open }}
                    </option>
                </select>
            </div>
        </section>

        {# Card: Advanced security #}
        <section class="card bg-base-100 shadow-xl" aria-labelledby="card-security">
            <div class="card-body">
                <h2 id="card-security" class="card-title text-xl mb-4">{{ card_security }}</h2>
                <label class="label cursor-pointer justify-start gap-4" for="fediverse_authorized_fetch">
                    <input
                        id="fediverse_authorized_fetch"
                        type="checkbox"
                        name="fediverse_authorized_fetch"
                        value="true"
                        class="checkbox checkbox-primary"
                        {% if settings.fediverse_authorized_fetch == "true" %}checked{% endif %}
                    >
                    <span class="flex flex-col">
                        <span class="label-text font-semibold">{{ authorized_fetch_label }}</span>
                        <span class="label-text-alt text-base-content/60">{{ authorized_fetch_desc }}</span>
                    </span>
                </label>
            </div>
        </section>

        {# Single primary CTA (Plan UI §3 P1) #}
        <div class="flex justify-end">
            <button type="submit" class="btn btn-primary">{{ save_button }}</button>
        </div>
    </form>
</div>
{% endblock %}