/**
 * SPA - example
 * (c)2025 Baxxon
 */

//import path from "node:path";
//import fs from "node:fs";

export default function( bx ){

// re-initialize the default head, body Baxxon templates
// could be imported at head of file and therefore easily shared between many JS modules
// template variable names must follow node naming conventions: no hyphens allowed

bx.templates.init({
	head: `<title>{title}</title>
<link href="/favicon.ico" rel="icon">
<link rel="preload" as="image" href="/logo-baxxon.svg">
<link href="/css/default.css" rel="stylesheet">
<link href="/css/baxxon.css" rel="stylesheet">
{js}
<style>{style}</style>
`,
	body: `<div>
<header>
	<div class="logo-baxxon"></div>
	<hgroup>
		<h1>SPA Tests</h1>
	</hgroup>
</header>
<main>
	<div class="bg logo-baxxon"></div>
	{content}
</main>
<footer>
	<div class="logo-baxxon"></div>
	<p>Info about Baxxon</p>
</footer>
</div>
{js}
`
});

// Now proceed to set your template vars

bx.templates.get('head').setVars({
	title: `Baxxon SPA Tests`,
	style: ``,
});

bx.templates.get('body').setVars({
	content: `<h2>Tests</h2>
<ul>
	<li><p><a href="/tests/textdb">TextDB</a></p></li>
</ul>
<div id="spa"></div>
`
});


	// merge all template vars into their templates
	const html = bx.templates.merge( 'root' );
	// render output
	bx.render.HTML( html );
}
