{{ define "_filetree" }}
<style>
	details > details details {
		padding-inline-start: 2em;
	}
	summary {
		display: flex;
		flex-direction: row;
	}
	summary.no-children {
		list-style: none;
	}
	summary.no-children::-webkit-details-marker {
		display: none;
	}
	#filetree {
		padding-right: 1em;
	}
	details > summary > .hamburger::before {
		content: "+";
	}
	details[open] > summary > .hamburger::before {
		content: "-";
	}
</style>
<div class="fullscreen tb_fullscreen" style="max-width: 25em; margin: auto;">
	<details open>
		<summary style="outline: none;"><span class="border button hamburger"></span></summary>
		<details open id="filetree">
		</details>
	</details>
</div>
<script>
	function drawTree(tree) {
		document.getElementById("filetree").innerHTML = branchHTML("", tree)
	}
	function branchHTML(id, branch) {
		return `
			<summary class="${branchesHaveContent(branch.Branches) ? "" : "no-children"}">
				${leafHTML(id, branch)}
			</summary>
			${branchesHTML(id, branch.Branches)}
		`
	}
	function leafHTML(id, branch) {
		const href="/ui/files/" + (id ? id : "")
		var nameSafeId = id.replace(/\//g, "-")
		var parentNameSafeId = nameSafeId
		if (id.includes("/"))
			parentNameSafeId = id.slice(0, id.lastIndexOf("/")).replace(/\//g, "-")
		const name=`filetree-leaf-${nameSafeId}`
		const parentname=`filetree-leaf-${parentNameSafeId}`
		const title=id ? branch.Leaf.Meta.Title : "ROOT"
		const isLiveParent = '{{ .This.ID }}'.slice(0, id.length) == id
		const isLive = '{{ .This.ID }}' == id
		const linkToFile = `
			<div style="margin: 0; padding: 0; height: 0; width: 0;" id="${name}"></div>
			<a style="flex-grow: 1;" href="${href}#${parentname}">
				<button style="width: 100%; text-align: left; outline: none;" class="${isLiveParent ? `button button-info ${!isLive ? "button-border" : ""}` : ""}">
					${title}
				</button>
			</a>
		`
		return linkToFile + (branch.Leaf.Meta.ReadOnly ? "" : `<a href="${href}/${generateUUID().split("-")[0]}#${parentname}"><button>+</button></a>`)
	}
	function branchesHTML(id, branches) {
		if (!branchesHaveContent(branches))
			return ""
		var html = []
		var out = ``
		for(var i in branches) {
			html.push([branches[i].Leaf.Meta.Title, `<details open>` + branchHTML(i, branches[i]) + `</details>`])
		}
		html.sort()
		for(var i in html)
			out += html[i][1]
		return out
	}
	function branchesHaveContent(branches) {
		var n = 0
		for (var i in branches)
			n += 1
		return n > 0
	}
	drawTree(JSON.parse({{ .Tree }}))
</script>
{{ end }}