{{/*
    Admin surface — v0.37.6: Full Preact component tree.
    Replaces server-rendered DOM with a mount point.
    All 24 sections are native Preact components.
*/}}

{{define "surface-admin"}}
<div id="shell-topbar"></div>
<div id="admin-mount" class="surface-admin" style="flex-direction:column;">
    {{/* Preact renders into this div. Show a loading state until it mounts. */}}
    <div class="settings-placeholder" style="padding:40px;text-align:center;">Loading admin&hellip;</div>
</div>

{{/* Legacy modals removed in v0.37.7 — all handled by Dialog primitives in Preact components */}}
{{end}}

{{/* CSS: loaded via base.html (variables, layout, primitives, modals, chat, panels, surfaces, splash) */}}
{{define "css-admin"}}{{end}}

{{/* Scripts */}}
{{define "scripts-admin"}}
{{/* Inject section name for Preact routing */}}
<script nonce="{{.CSPNonce}}">
    window.__SECTION__ = '{{.Section}}';
    window.__CONFIG_SECTIONS__ = {{.Data.ConfigSections | toJSON}};
</script>

{{/* Vendor: Preact + htm → globals, then SDK boot, then admin surface */}}
<script type="module" nonce="{{.CSPNonce}}">
    const { h, render } = await import('{{.BasePath}}/js/sw/vendor/preact.module.js');
    const hooksModule = await import('{{.BasePath}}/js/sw/vendor/hooks.module.js');
    const { default: htm } = await import('{{.BasePath}}/js/sw/vendor/htm.module.js');
    const html = htm.bind(h);
    window.preact = window.preact || { h, render };
    window.hooks = window.hooks || hooksModule;
    window.html = window.html || html;

    // Boot SDK (idempotent)
    const { boot } = await import('{{.BasePath}}/js/sw/sdk/index.js?v={{.Version}}');
    await boot();

    // Mount admin surface
    await import('{{.BasePath}}/js/sw/surfaces/admin/index.js?v={{.Version}}');
</script>
{{end}}