{{ define "page" }}
<script type="importmap">
{
	"imports": {
		"@editor": "/js/{{ .VERSION }}/editor.mjs",
		"@mbus":   "/js/{{ .VERSION }}/mbus.mjs"
	}
}
</script>

<script src="/js/{{ .VERSION }}/lib/jsoneditor.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>-->
<script type="module" defer>
	import {App, TreeNode} from '/js/{{ .VERSION }}/app.mjs'
	window._VERSION = '{{ .VERSION }}'
	window._app = new App()

	fetch('/nodes/tree/0?depth=2')
		.then(data => data.json())
		.then(json => {
			if (!json.OK) {
				showError(json.Error)
				return
			}

			const top = document.getElementById('nodes')
			const topNode = new TreeNode(top, json.Nodes)
			topNode.render()
		})

</script>

<div id="layout">
	<div class="page section" id="menu">
		<div class="item" id="logo"><img src="/images/{{ .VERSION }}/logo.svg" /></div>
		<div class="item" data-section='node' onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'node')">Nodes</div>
		<div class="item" data-section='type' onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'type')">Types</div>
	</div>

	<div class="page section" id="nodes"></div>
	<div class="page" id="editor-node">
		<div class="section">
			<img  onclick="mbus.dispatch('NODE_CREATE_DIALOG')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/plus-box.svg" style="display: block; height: 32px" />
		</div>

		<div class="section">
			<div class="editor"></div>
			<div class="controls">
				<button onclick="mbus.dispatch('EDITOR_NODE_SAVE')">Save</button>
			</div>
		</div>

		<div class="section">
			<b>References</b>
		</div>

	</div>

	<div class="page section" id="types"></div>
	<div class="page section" id="editor-type-schema"></div>
</div>

<link rel="stylesheet" href="/css/{{ .VERSION }}/spectre.min.css">
<link rel="stylesheet" href="/css/{{ .VERSION }}/spectre-exp.min.css">
<link rel="stylesheet" href="/css/{{ .VERSION }}/spectre-icons.min.css">

{{ end }}