import tpl from "./templates/html.js";

export default function(bx){

	bx.templates.init(tpl);
	bx.templates.get('head').setVars({
		title: `Baxxon - Examples - Dynamic API`,
		js: "",
		style: ``,
	});
	bx.templates.get('body').setVars({
		title: "Dynamic API",
		subtitle: "Client-side interaction via APIs and standard Event Handling.",
		intro: bx.renderContent("content/intro.md"),
		demo: bx.renderContent("content/demo.html")
	});

	bx.templates.get('root').setVars({
		head: bx.templates.merge('head'),
		body: bx.templates.merge('body'),
		js: `<script type="module">
import API from "/js/baxxon/api.js"
import events from "/js/baxxon/events.js"

window.addEventListener('load', ()=>{
	// set events
	for(const id of Object.keys(events)){
		if(document.getElementById(id)){
			const el = document.getElementById(id);
			if(el){
				for(const event of Object.keys(events[id])){
					el.addEventListener(event, events[id][event]);
				}
			}
		}
	}
});
</script>`
	});

	bx.render.HTML(bx.templates.merge('root'));
}
