{{ define "page" }}
	<script type="text/javascript">
		function newArea() {
			let name = prompt("Area name")
			if (name === null)
				return

			if (name.trim() == '') {
				alert("Name can't be empty")
				return
			}

			location.href = `/area/new/${name.trim()}`
		}
		function renameArea(id, name) {
			const newName = prompt('Rename area', name)
			if (newName === null)
				return

			if (newName.trim() == '') {
				alert("Name can't be empty")
				return
			}
			location.href = `/area/rename/${id}/${newName.trim()}`
		}

		function newSection(areaID) {
			let name = prompt("Section name")
			if (name === null)
				return

			if (name.trim() == '') {
				alert("Name can't be empty")
				return
			}

			location.href = `/section/new/${areaID}/${name.trim()}`
		}
		function renameSection(id, name) {
			const newName = prompt('Rename section', name)
			if (newName === null)
				return

			if (newName.trim() == '') {
				alert("Name can't be empty")
				return
			}
			location.href = `/section/rename/${id}/${newName.trim()}`
		}
	</script>

	{{ block "page_label" . }}{{end}}

	<h1>Areas</h1>

	<a href="#" onclick="newArea()">Create</a>

	<div id="areas">
		{{ range .Data.Areas }}
		<div class="area">
			<div class="name" onclick="renameArea({{ .ID }}, {{ .Name }})">{{ .Name }}</div>

			<div style="margin: 8px 16px">
				<a href="#" onclick="newSection({{ .ID }})">Create</a>
			</div>
			{{ range .SortedSections }}
			<div class="section">
				<div class="name" onclick="renameSection({{ .ID }}, {{ .Name }})">{{ .Name }}</div>
			</div>
			{{ end }}
		</div>
		{{ end }}
	</div>

{{ end }}