{{/*
    Settings surface — v0.37.5: Preact component tree.
    Replaces server-rendered DOM with a mount point.
    Bridge sections (tasks, gitkeys, workflows, data) still load old JS.
*/}}

{{define "surface-settings"}}
<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}}';
</script>

{{/* Bridge section JS — deferred sections still use old imperative code */}}
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/task-settings.js?v={{.Version}}"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/git-credentials-ui.js?v={{.Version}}"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/knowledge-ui.js?v={{.Version}}"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/persona-kb.js?v={{.Version}}"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notification-prefs.js?v={{.Version}}"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/channel-models.js?v={{.Version}}"></script>
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/data-portability.js?v={{.Version}}"></script>

{{/* 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}}