<script lang="ts">
/**
 * Pres Mgmt Config Page
 * Route: /events/[event_id]/(pres_mgmt)/pres_mgmt/config
 *
 * Admin UI for managing event.mod_pres_mgmt_json (PressMgmtRemoteCfg).
 * Access: manager_access only. Button visible in edit_mode only.
 *
 * Save pattern: load → merge draft → PATCH event via V3 API.
 * The sync function (sync_config__event_pres_mgmt) will pick up the
 * new values on the next event load.
 */
import { untrack } from 'svelte';
import { liveQuery } from 'dexie';
import { db_events } from '$lib/ae_events/db_events';
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import { events_slct } from '$lib/stores/ae_events_stores';
import { events_func } from '$lib/ae_events/ae_events_functions';
import { api } from '$lib/ae_api/api';
import type { PressMgmtRemoteCfg } from '$lib/stores/ae_events_stores__pres_mgmt_defaults';
import {
    TriangleAlert,
    ArrowLeft,
    Check,
    ChevronDown,
    ChevronUp,
    Info,
    Lock,
    Save,
    Settings
} from '@lucide/svelte';

interface Props {
    data: any;
}
let { data }: Props = $props();

let event_id = $derived($events_slct.event_id ?? '');

let lq__event_obj = $derived(
    liveQuery(async () => {
        if (!event_id) return null;
        return await db_events.event.get(event_id);
    })
);

// ---------------------------------------------------------------------------
// Draft state — initialized from the live event config
// ---------------------------------------------------------------------------
const cfg_defaults: PressMgmtRemoteCfg = {
    label__person_external_id: null,
    label__presenter_external_id: null,
    label__session_poc_type: null,
    label__session_poc_name: null,
    hide__location_code: false,
    hide__presentation_code: false,
    hide__presenter_code: false,
    hide__session_code: false,
    hide__session_description: false,
    hide__session_location: false,
    hide__session_msg: false,
    hide__session_poc: false,
    hide__session_poc_biography: false,
    hide__session_poc_profile: false,
    hide__session_poc_profile_pic: false,
    hide__presenter_biography: false,
    hide__presentation_datetime: false,
    hide__presentation_description: false,
    show__copy_access_link: false,
    show__email_access_link: false,
    show__launcher_link: false,
    show__session_li_poc_field: false,
    show__session_qr: false,
    show__presenter_qr: false,
    require__presenter_agree: false,
    require__session_agree: false,
    limit__navigation: false,
    file_purpose_option_kv: null,
    hide__report_kv: {}
};

let draft: PressMgmtRemoteCfg = $state({ ...cfg_defaults });

// Draft is initialized from event data once on load; user edits from there.
// Intentionally NOT reactive after init — prevents live overwrites while editing.
let draft_initialized = $state(false);
let initial_json = $state('');
$effect(() => {
    const event_cfg = $lq__event_obj?.mod_pres_mgmt_json;
    if (event_cfg && !draft_initialized) {
        untrack(() => {
            draft = { ...cfg_defaults, ...event_cfg };
            initial_json = JSON.stringify(draft);
            draft_initialized = true;
        });
    }
});

let is_dirty = $derived(draft_initialized && JSON.stringify(draft) !== initial_json);

// ---------------------------------------------------------------------------
// JSON fields (file_purpose_option_kv) as textarea string
// hide__report_kv is edited via structured per-slug toggles (no JSON textarea needed)
let file_purpose_json_str = $state('');
let file_purpose_json_error = $state('');

$effect(() => {
    if (draft_initialized) {
        untrack(() => {
            file_purpose_json_str = draft.file_purpose_option_kv
                ? JSON.stringify(draft.file_purpose_option_kv, null, 2)
                : '';
        });
    }
});

function parse_file_purpose_json() {
    file_purpose_json_error = '';
    if (!file_purpose_json_str.trim()) {
        draft.file_purpose_option_kv = null;
        return;
    }
    try {
        draft.file_purpose_option_kv = JSON.parse(file_purpose_json_str);
    } catch (e) {
        file_purpose_json_error = 'Invalid JSON';
    }
}

// ---------------------------------------------------------------------------
// Save
// ---------------------------------------------------------------------------
let save_status: 'idle' | 'saving' | 'success' | 'error' = $state('idle');

async function save() {
    if (!event_id) return;
    parse_file_purpose_json();
    if (file_purpose_json_error) return;

    save_status = 'saving';
    try {
        await api.update_ae_obj({
            api_cfg: $ae_api,
            obj_type: 'event',
            obj_id: event_id,
            fields: { mod_pres_mgmt_json: draft },
            log_lvl: 1
        });

        // Sync this browser's pres_mgmt_loc immediately from the just-saved draft.
        // WHY: load_ae_obj_id__event() below is SWR — it returns the stale Dexie
        // cache right away and refreshes from the API in the background (fire and
        // forget), so it cannot be relied on to update pres_mgmt_loc in time. Calling
        // the sync function directly here makes the editor's own browser update
        // deterministically, with no race against Dexie/liveQuery propagation.
        events_func.sync_config__event_pres_mgmt({
            pres_mgmt_cfg_remote: draft,
            log_lvl: 1
        });

        // Also kick off the normal SWR reload (try_cache: true, the default) so
        // Dexie gets the fresh record in the background — this is what lets OTHER
        // browsers/tabs pick up the change next time they query Dexie. Do not pass
        // try_cache: false here — that skips the Dexie write entirely (see
        // GUIDE__SvelteKit2_Svelte5_DexieJS.md "try_cache: false Bug").
        await events_func.load_ae_obj_id__event({
            api_cfg: $ae_api,
            event_id: event_id,
            log_lvl: 1
        });
        initial_json = JSON.stringify(draft); // reset dirty baseline
        save_status = 'success';
        setTimeout(() => (save_status = 'idle'), 3000);
    } catch (e) {
        console.error('Failed to save pres_mgmt config', e);
        save_status = 'error';
        setTimeout(() => (save_status = 'idle'), 5000);
    }
}

// Section collapse state
let sections: Record<string, boolean> = $state({
    labels: true,
    codes: true,
    session: true,
    poc: true,
    presenter: true,
    presentation: true,
    opt_in: true,
    requirements: true,
    navigation: true,
    file_purpose: false,
    reports: false
});
function toggle(key: string) {
    sections[key] = !sections[key];
}
</script>

<svelte:head>
    <title>Pres Mgmt Config</title>
</svelte:head>

{#if !$ae_loc.manager_access}
    <div class="p-8 text-center opacity-50">
        <Lock size="3em" class="mx-auto mb-2" />
        <p>Manager access required.</p>
    </div>
{:else}
    <div class="mx-auto w-full max-w-3xl space-y-4 px-2 py-4">

        <!-- Header -->
        <header class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-2">
                <a href="/events/{event_id}/pres_mgmt"
                    class="btn btn-sm preset-tonal-surface"
                    title="Back to Pres Mgmt">
                    <ArrowLeft size="1em" />
                </a>
                <Settings size="1.2em" class="text-primary-500" />
                <h1 class="text-xl font-bold">Pres Mgmt Config</h1>
            </div>
            <div class="flex items-center gap-2">
                {#if save_status === 'success'}
                    <span class="badge preset-tonal-success flex items-center gap-1">
                        <Check size="1em" /> Saved
                    </span>
                {:else if save_status === 'error'}
                    <span class="badge preset-tonal-error flex items-center gap-1">
                        <TriangleAlert size="1em" /> Error saving
                    </span>
                {/if}
                <button
                    type="button"
                    class="btn preset-filled-primary-500"
                    onclick={save}
                    disabled={!is_dirty || save_status === 'saving'}>
                    <Save size="1em" class="mr-1" />
                    {save_status === 'saving' ? 'Saving...' : 'Save'}
                </button>
            </div>
        </header>

        <p class="text-surface-500 text-sm">
            Changes here update <code>event.mod_pres_mgmt_json</code> and take effect on
            the next event load, applying to every browser.
        </p>

        {#if !draft_initialized}
            <p class="text-surface-400 italic">Loading event config...</p>
        {:else}

        <!-- ================================================================ -->
        <!-- LABELS -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('labels')}>
                <span>Labels</span>
                {#if sections.labels}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.labels}
                <div class="border-surface-200-800 grid grid-cols-1 gap-3 border-t px-4 py-3 sm:grid-cols-2">
                    <label class="flex flex-col gap-1">
                        <span class="text-sm font-medium">Person External ID Label</span>
                        <input
                            type="text"
                            class="input"
                            placeholder="External ID"
                            title="Overrides the label shown for a Person's external ID field across the app. Leave blank to use the default 'External ID'."
                            bind:value={draft.label__person_external_id} />
                    </label>
                    <label class="flex flex-col gap-1">
                        <span class="text-sm font-medium">Presenter External ID Label</span>
                        <input
                            type="text"
                            class="input"
                            placeholder="External ID"
                            title="Overrides the label shown for a Presenter's external ID field. Leave blank to use the default 'External ID'."
                            bind:value={draft.label__presenter_external_id} />
                    </label>
                    <label class="flex flex-col gap-1">
                        <span class="text-sm font-medium">Session POC Type</span>
                        <input
                            type="text"
                            class="input"
                            placeholder="poc"
                            title="A short slug for what to call a session's Point of Contact (e.g. 'champion', 'chair'). Used internally — Session POC Name below is what's actually displayed to users."
                            bind:value={draft.label__session_poc_type} />
                        <span class="text-surface-500 text-xs">e.g. "champion", "poc", "chair"</span>
                    </label>
                    <label class="flex flex-col gap-1">
                        <span class="text-sm font-medium">Session POC Name</span>
                        <input
                            type="text"
                            class="input"
                            placeholder="Point of Contact"
                            title="The display label shown to users for a session's Point of Contact (e.g. 'Champion', 'Host'). Leave blank to use the default 'Point of Contact'."
                            bind:value={draft.label__session_poc_name} />
                        <span class="text-surface-500 text-xs">e.g. "Champion", "Point of Contact"</span>
                    </label>
                </div>
            {/if}
        </section>

        <!-- ================================================================ -->
        <!-- CODE VISIBILITY -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('codes')}>
                <span>Code Visibility</span>
                {#if sections.codes}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.codes}
                <div class="border-surface-200-800 grid grid-cols-2 gap-3 border-t px-4 py-3">
                    {#each [
                        { field: 'hide__session_code' as const, label: 'Hide Session Code', title: "Hides the session's short code wherever sessions are listed or viewed." },
                        { field: 'hide__location_code' as const, label: 'Hide Location Code', title: "Hides the location's short code wherever locations are listed or viewed." },
                        { field: 'hide__presenter_code' as const, label: 'Hide Presenter Code', title: "Hides the presenter's short code. Not currently shown anywhere in the app — has no visible effect yet." },
                        { field: 'hide__presentation_code' as const, label: 'Hide Presentation Code', title: "Hides the presentation's short code wherever presentations are listed or viewed." }
                    ] as item (item.field)}
                        <label class="flex items-center gap-2" title={item.title}>
                            <input type="checkbox" class="checkbox" bind:checked={draft[item.field]} />
                            <span class="text-sm">{item.label}</span>
                        </label>
                    {/each}
                </div>
            {/if}
        </section>

        <!-- ================================================================ -->
        <!-- SESSION DISPLAY -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('session')}>
                <span>Session Display</span>
                {#if sections.session}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.session}
                <div class="border-surface-200-800 grid grid-cols-2 gap-3 border-t px-4 py-3">
                    {#each [
                        { field: 'hide__session_description' as const, label: 'Hide Description', title: "Hides the session's description text on the session detail page." },
                        { field: 'hide__session_location' as const, label: 'Hide Location', title: 'Hides the location name/links on the session detail page, AND hides the Location column in session list/table views (including Session Search results).' },
                        { field: 'hide__session_msg' as const, label: 'Hide Message', title: "Hides the session's custom message/alert text." }
                    ] as item (item.field)}
                        <label class="flex items-center gap-2" title={item.title}>
                            <input type="checkbox" class="checkbox" bind:checked={draft[item.field]} />
                            <span class="text-sm">{item.label}</span>
                        </label>
                    {/each}
                </div>
            {/if}
        </section>

        <!-- ================================================================ -->
        <!-- POC (POINT OF CONTACT) SETTINGS -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('poc')}>
                <span>POC Settings <span class="text-surface-500 text-xs font-normal">(Point of Contact)</span></span>
                {#if sections.poc}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.poc}
                <div class="border-surface-200-800 border-t px-4 py-3">
                    <label
                        class="flex items-start gap-2"
                        title="Master switch. When on, the POC is hidden everywhere — the session detail page AND the column in session list/table views (including the setting below) — no exceptions.">
                        <input type="checkbox" class="checkbox mt-0.5" bind:checked={draft.hide__session_poc} />
                        <span>
                            <span class="text-sm font-semibold">Hide POC</span>
                            <span class="text-surface-500 ml-1 text-xs">— master switch, overrides everything below</span>
                        </span>
                    </label>

                    <!-- Sub-settings only matter while Hide POC (above) is off — indented and
                         disabled when it's on to make that dependency visible, not just documented. -->
                    <div
                        class="border-surface-200-800 mt-3 ml-6 grid grid-cols-2 gap-3 border-l pl-4"
                        class:opacity-40={draft.hide__session_poc}>
                        {#each [
                            { field: 'show__session_li_poc_field' as const, label: 'Show POC Column in Lists/Tables', title: "Adds a POC column to session list/table views (e.g. Session Search results). Off by default — check to opt in. No effect if 'Hide POC' above is checked." },
                            { field: 'hide__session_poc_biography' as const, label: 'Hide POC Biography', title: "Hides the POC's biography text wherever it would otherwise be shown. No effect if 'Hide POC' above is checked." },
                            { field: 'hide__session_poc_profile' as const, label: 'Hide POC Profile', title: "Hides the link/button to view the POC's full profile. No effect if 'Hide POC' above is checked." },
                            { field: 'hide__session_poc_profile_pic' as const, label: 'Hide POC Profile Pic', title: "Hides the POC's profile picture. No effect if 'Hide POC' above is checked." }
                        ] as item (item.field)}
                            <label class="flex items-center gap-2" title={item.title}>
                                <input
                                    type="checkbox"
                                    class="checkbox"
                                    disabled={draft.hide__session_poc}
                                    bind:checked={draft[item.field]} />
                                <span class="text-sm">{item.label}</span>
                            </label>
                        {/each}
                    </div>
                </div>
            {/if}
        </section>

        <!-- ================================================================ -->
        <!-- PRESENTER FIELDS -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('presenter')}>
                <span>Presenter Field Visibility</span>
                {#if sections.presenter}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.presenter}
                <div class="border-surface-200-800 grid grid-cols-2 gap-3 border-t px-4 py-3">
                    <label
                        class="flex items-center gap-2"
                        title="Hides the presenter's biography text on the presenter detail page.">
                        <input type="checkbox" class="checkbox" bind:checked={draft.hide__presenter_biography} />
                        <span class="text-sm">Hide Biography</span>
                    </label>
                </div>
            {/if}
        </section>

        <!-- ================================================================ -->
        <!-- PRESENTATION FIELDS -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('presentation')}>
                <span>Presentation Field Visibility</span>
                {#if sections.presentation}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.presentation}
                <div class="border-surface-200-800 grid grid-cols-2 gap-3 border-t px-4 py-3">
                    <label
                        class="flex items-center gap-2"
                        title="Hides the presentation's date and time.">
                        <input type="checkbox" class="checkbox" bind:checked={draft.hide__presentation_datetime} />
                        <span class="text-sm">Hide Date/Time</span>
                    </label>
                    <label
                        class="flex items-center gap-2"
                        title="Hides the presentation's description text.">
                        <input type="checkbox" class="checkbox" bind:checked={draft.hide__presentation_description} />
                        <span class="text-sm">Hide Description</span>
                    </label>
                </div>
            {/if}
        </section>

        <!-- ================================================================ -->
        <!-- OPT-IN FEATURES -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('opt_in')}>
                <span>Opt-in Features <span class="text-surface-500 text-xs font-normal">(off by default)</span></span>
                {#if sections.opt_in}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.opt_in}
                <div class="border-surface-200-800 grid grid-cols-2 gap-3 border-t px-4 py-3">
                    {#each [
                        { field: 'show__copy_access_link' as const, label: 'Copy Access Link', title: "Shows a 'Copy Access Link' button so Trusted staff can quickly copy a presenter/POC's sign-in link." },
                        { field: 'show__email_access_link' as const, label: 'Email Access Link', title: "Shows an 'Email Access Link' button so Trusted staff can email a presenter/POC their sign-in link." },
                        { field: 'show__launcher_link' as const, label: 'Launcher Link', title: 'Shows the Launcher link/icon to everyone in session lists. Trusted staff always see it regardless of this setting.' },
                        { field: 'show__session_qr' as const, label: 'Session QR Code', title: 'Shows a QR code on the session detail page to everyone, signed in or not. Independent of this, Trusted staff can locally turn it on/off for just their own browser via the session Options menu.' },
                        { field: 'show__presenter_qr' as const, label: 'Presenter QR Code', title: 'Shows a QR code on the presenter detail page to everyone, signed in or not. Independent of this, Trusted staff can locally turn it on/off for just their own browser via the presenter Options menu.' }
                    ] as item (item.field)}
                        <label class="flex items-center gap-2" title={item.title}>
                            <input type="checkbox" class="checkbox" bind:checked={draft[item.field]} />
                            <span class="text-sm">{item.label}</span>
                        </label>
                    {/each}
                </div>
            {/if}
        </section>

        <!-- ================================================================ -->
        <!-- REQUIREMENTS -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('requirements')}>
                <span>Requirements</span>
                {#if sections.requirements}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.requirements}
                <div class="border-surface-200-800 grid grid-cols-2 gap-3 border-t px-4 py-3">
                    <label
                        class="flex items-center gap-2"
                        title="Requires each presenter to agree to terms before participating; adds an Agreed/Not Agreed action to the presenter menu.">
                        <input type="checkbox" class="checkbox" bind:checked={draft.require__presenter_agree} />
                        <span class="text-sm">Require Presenter Agreement</span>
                    </label>
                    <label
                        class="flex items-center gap-2"
                        title="Requires the session POC to agree to terms before participating; adds an Agreed/Not Agreed action to the session menu.">
                        <input type="checkbox" class="checkbox" bind:checked={draft.require__session_agree} />
                        <span class="text-sm">Require Session Agreement</span>
                    </label>
                </div>
            {/if}
        </section>

        <!-- ================================================================ -->
        <!-- NAVIGATION LIMITS -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('navigation')}>
                <span>Navigation &amp; UI Limits</span>
                {#if sections.navigation}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.navigation}
                <div class="border-surface-200-800 grid grid-cols-1 gap-3 border-t px-4 py-3">
                    <p class="text-surface-500 text-xs">Hides the Session Search link for non-staff users, keeping presenters within their assigned session.</p>
                    <label
                        class="flex items-center gap-2"
                        title="Hides the Session Search nav link for non-staff users (Trusted access and above always see it).">
                        <input type="checkbox" class="checkbox" bind:checked={draft.limit__navigation} />
                        <span class="text-sm">Limit Navigation (hide Session Search for non-staff)</span>
                    </label>
                </div>
            {/if}
        </section>

        <!-- ================================================================ -->
        <!-- FILE PURPOSE CONFIG -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('file_purpose')}>
                <span>File Purpose Options <span class="text-surface-500 text-xs font-normal">(advanced)</span></span>
                {#if sections.file_purpose}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.file_purpose}
                <div class="border-surface-200-800 space-y-2 border-t px-4 py-3">
                    <div class="flex items-start gap-1 text-xs opacity-60">
                        <Info size="1em" class="mt-0.5 flex-none" />
                        JSON object: keys are purpose slugs, values are <code>&#123; name, disabled?, hidden? &#125;</code>.
                        Leave empty to use system defaults.
                    </div>
                    <textarea
                        class="input font-mono text-xs"
                        rows={10}
                        placeholder='&#123; "final": &#123; "name": "3. Final", "disabled": false &#125; &#125;'
                        title="Advanced: raw JSON controlling the file purpose dropdown options shown during upload. Leave empty to use system defaults."
                        bind:value={file_purpose_json_str}
                        onblur={parse_file_purpose_json}></textarea>
                    {#if file_purpose_json_error}
                        <p class="text-error-500 text-xs">{file_purpose_json_error}</p>
                    {/if}
                </div>
            {/if}
        </section>

        <!-- ================================================================ -->
        <!-- REPORT VISIBILITY -->
        <!-- ================================================================ -->
        <section class="border-surface-200-800 rounded-xl border">
            <button
                type="button"
                class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold"
                onclick={() => toggle('reports')}>
                <span>Report Visibility <span class="text-surface-500 text-xs font-normal">(advanced)</span></span>
                {#if sections.reports}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
            </button>
            {#if sections.reports}
                <div class="border-surface-200-800 space-y-2 border-t px-4 py-3">
                    <p class="text-surface-500 text-xs">Hidden reports are not shown to staff unless in edit mode.</p>
                    {#each [
                        { slug: 'session_no_files', label: 'Sessions without Files' },
                        { slug: 'sessions_poc_agree', label: 'Session POC Agreement' },
                        { slug: 'session_no_bio', label: 'Session POC Bios' },
                        { slug: 'presenters_agree', label: 'Presenter Agreement' },
                        { slug: 'presenters_biography', label: 'Presenter Bios' },
                        { slug: 'presenters_overview', label: 'Presenter Overview' },
                        { slug: 'event_files', label: 'Event Files' },
                        { slug: 'file_downloads', label: 'File Downloads' }
                    ] as rpt (rpt.slug)}
                        <label
                            class="flex items-center gap-2"
                            title="Hides the '{rpt.label}' report tab from staff unless they are in edit mode.">
                            <input
                                type="checkbox"
                                class="checkbox"
                                checked={draft.hide__report_kv[rpt.slug] ?? false}
                                onchange={(e) => {
                                    if (e.currentTarget.checked) {
                                        draft.hide__report_kv[rpt.slug] = true;
                                    } else {
                                        delete draft.hide__report_kv[rpt.slug];
                                        draft.hide__report_kv = { ...draft.hide__report_kv };
                                    }
                                }} />
                            <span class="text-sm">Hide: {rpt.label}</span>
                        </label>
                    {/each}
                </div>
            {/if}
        </section>

        <!-- Bottom save button -->
        <div class="flex justify-end">
            <button
                type="button"
                class="btn preset-filled-primary-500"
                onclick={save}
                disabled={!is_dirty || save_status === 'saving'}>
                <Save size="1em" class="mr-1" />
                {save_status === 'saving' ? 'Saving...' : 'Save Config'}
            </button>
        </div>

        {/if}
    </div>
{/if}
