{{/*
    Settings surface — v0.37.7: Full Preact component tree.
    All sections are native Preact components. No bridges.
*/}}

{{define "surface-settings"}}
<div id="shell-topbar"></div>
<div id="settings-mount" class="surface-settings" 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 settings&hellip;</div>
</div>
{{end}}

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

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

{{/* Bridge section scripts removed in v0.37.7 — all sections are native Preact */}}

{{/* Vendor: Preact + htm → globals, then SDK boot, then settings 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 — may already be loaded by base.html in future)
    const { boot } = await import('{{.BasePath}}/js/sw/sdk/index.js?v={{.Version}}');
    await boot();

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