{{ define "page" }}

<!-- Drag and drop elements -->

<!-- page-node -->
<div id="notes2" class="page-history">
	<div id="tree-expander" onclick="window._mbus.dispatch('TREE_EXPANSION', { expand: true })">&gt;</div>
	<div id="tree" tabindex=0></div>
	<n2-menu></n2-menu>
	<div id="node-menu" popover>Popover content</div>

	<div id="main-page">
		<!-- Storage stats -->
		<div id="page-storage">
			<n2-pagestorage></n2-pagestorage>
		</div>

		<div id="page-root">
			<div>
				<img src="/images/{{ .VERSION }}/logo.svg">
				<div> {{ .VERSION }}</div>

				<div class="create">Create note</div>
			</div>
		</div>

		<!-- Node editing -->
		<div id="page-node">
			<div id="crumbs"></div>
			<n2-nodeui id="note"></n2-nodeui>
		</div>

		<!-- History -->
		<div id="page-history">
			<n2-pagehistory></n2-pagehistory>
		</div>
	</div>

	<n2-syncprogress></n2-syncprogress>
</div>

<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/page_history.css">

<script type="module">
	import {NodeStore} from '/js/{{ .VERSION }}/node_store.mjs'

	import {App} from "/js/{{ .VERSION }}/app.mjs"
	import {API} from 'api'
	import {Sync} from 'sync'
	import { } from '/js/{{ .VERSION }}/page_storage.mjs'
	import { } from '/js/{{ .VERSION }}/page_history.mjs'
	import { } from '/js/{{ .VERSION }}/file.mjs'

	window.Sync = Sync

	if (!API.hasAuthenticationToken()) {
		location.href = '/login'
	} else {
		try {
			window.nodeStore = new NodeStore()
			window.nodeStore.initializeDB().then(() => {
				window._app = new App()
			})
		} catch (e) {
			alert(e)
		}
	}
</script>

{{ end }}