{{ define "page" }}
	{{ $version := .VERSION }}
	{{ $theme := .CONFIG.THEME }}
	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/configuration.css">
	<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()}`
		}

		function deleteArea(id, name) {
			if (!confirm(`Are you sure you want to delete '${name}'?\nEverything in it will be deleted!`))
				return
			location.href = `/area/delete/${id}`
		}

		function deleteSection(id, name) {
			if (!confirm(`Are you sure you want to delete '${name}'?\nEverything in it will be deleted!`))
				return
			location.href = `/section/delete/${id}`
		}

		function newNotification() {
			const select = document.getElementById('notification-create-type')
			const nType = select.value
			location.href = `/configuration/notification?type=${nType}`
		}
		function deleteNotification(prio) {
			if (!confirm(`Are you sure you want to delete notification with prio ${prio}?`))
				return
			location.href = `/configuration/notification/delete/${prio}`;
		}
	</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">
				<div onclick="renameArea({{ .ID }}, '{{ .Name }}')">{{ .Name }}</div>
				<img class="delete" src="/images/{{ $version }}/{{ $theme }}/delete_white.svg" onclick="deleteArea({{ .ID }}, '{{ .Name }}')">
			</div>

			<div style="margin: 8px 16px">
				<a href="#" onclick="newSection({{ .ID }})">Create</a>
			</div>
			{{ range .SortedSections }}
			{{ 	if eq .ID 0 }}
			{{ 		continue }}
			{{ 	end }}
			<div class="section configuration">
				<div class="name" onclick="renameSection({{ .ID }}, {{ .Name }})">{{ .Name }}</div>
				<img src="/images/{{ $version }}/{{ $theme }}/delete.svg" onclick="deleteSection({{ .ID }}, '{{ .Name }}')">
			</div>
			{{ end }}
		</div>
		{{ end }}
	</div>

	<h1>Theme</h1>
	<form action="/configuration/theme">
		<select name="theme" onchange="console.log(this.form.submit())">
			<option value="default_light" {{ if eq "default_light" .CONFIG.THEME }}selected{{ end }}>Default light</option>
			<option value="gruvbox"       {{ if eq "gruvbox" .CONFIG.THEME }}selected{{ end }}>Gruvbox</option>
		</select>
	</form>

	<h1>Timezone</h1>
	<form action="/configuration/timezone" method="post">
		<input name="timezone" type="text" value="{{ .CONFIG.TIMEZONE }}">
		<button style="margin-left: 8px;">Update</button>
	</form>

	<h1>Notifications</h1>
	<select id="notification-create-type">
	{{ range .Data.AvailableServices }}
		<option>{{ .GetType }}</option>
	{{ end }}
	</select>
	<button onclick="newNotification()">Create</button>

	<div id="services">
		<div class="header">Prio</div>
		<div class="header">Type</div>
		<div class="header">Target</div>
		<div></div>
		<div class="line"></div>
		{{ range .Data.NotificationServices }}
		<div><a href="/configuration/notification?prio={{ .GetPrio }}">{{ .GetPrio }}</a></div>
		<div><a href="/configuration/notification?prio={{ .GetPrio }}">{{ .GetType }}</a></div>
		<div><a href="/configuration/notification?prio={{ .GetPrio }}">{{ .String }}</a></div>
		<div><img onclick="deleteNotification({{ .GetPrio }})" class="delete" src="/images/{{ $version }}/{{ $theme }}/delete.svg"></div>
		{{ end }}
	</div>

{{ end }}