{{ define "page" }}

	{{ block "page_label" . }}{{end}}
	{{ $version := .VERSION }}
	{{ $theme := .CONFIG.THEME }}
	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/triggers.css">

	<script type="text/javascript">
		function createTrigger(sectionID) {
			let name = prompt("Trigger name")
			if (name === null)
				return

			if (name.trim() == "") {
				alert('A name is required')
				return
			}

			fetch(`/trigger/create/${sectionID}/${encodeURIComponent(name)}`)
			.then(data=>data.json())
			.then(json=>{
					if (!json.OK) {
						alert(json.Error)
						return
					}
					location.href = `/trigger/edit/${json.Trigger.ID}`
			})
		}

		function deleteTrigger(triggerID, name) {
			if (!confirm(`Sure you want to delete '${name}'?`))
				return
			location.href = `/trigger/delete/${triggerID}`
		}
	</script>

	<div id="areas">
		{{ range .Data.Areas }}
		<div class="area">
			<div class="name">{{ .Name }}</div>
			{{ range .SortedSections }}
			{{ if eq .ID 0 }}
			{{ continue }}
			{{ end }}
			<div class="section">
				<div class="create">
					<div class="name">{{ .Name }}</div>
					<div class="new"><a onclick="createTrigger({{ .ID }})">+</a></div>
				</div>

				<div class="triggers">
				{{ range .SortedTriggers }}
					{{ if eq .Name "" }}
					{{ continue }}
					{{ end }}
					<div class="trigger">
						<img src="/images/{{ $version }}/{{ $theme }}/triggers.svg">
						<div class="label"><a href="/trigger/edit/{{ .ID }}">{{ .Name }}</a></div>
						<img src="/images/{{ $version }}/{{ $theme }}/delete.svg" onclick="deleteTrigger({{ .ID }}, '{{ .Name }}')">
					</div>
				{{ end }}
				</div>
			</div>
			{{ end }}
		</div>
		{{ end }}
	</div>

{{ end }}