{{ define "page" }}
	<script type="module" defer>
		import {UI, Trigger} from "/js/{{ .VERSION }}/trigger_edit.mjs"

		window._ui = new UI({{ .VERSION }}, {{ .CONFIG.THEME }})
		let trigger = new Trigger(
			{{ .Data.Trigger.ID }},
			'{{ .Data.Trigger.Name }}',
			{{ .Data.Datapoints }},
		)
		_ui.setTrigger(trigger)
		_ui.render()
	</script>
	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/trigger_edit.css">

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

	<dialog id="dlg-datapoints">
		<input list="list-datapoints" id="datapoint">
		<datalist id="list-datapoints"></datalist>
		<button onclick="_ui.chooseDatapoint()">OK</button>
	</dialog>

	<form id="form-trigger" action="/trigger/update/{{ .Data.Trigger.ID }}" method="post">
		<input type="hidden" name="sectionID" value="{{ .Data.Trigger.SectionID }}">
		<div id="widgets" class="widgets">
			<div class="label">Name</div>
			<div><input type="text" name="name" value="{{ .Data.Trigger.Name }}"></div>

			<div class="label">Datapoints</div>
			<div class="datapoints" style="margin-top: 4px">
				<div style="grid-column: 1 / -1"><a onclick="_ui.addDatapoint()">Add</a></div>
			</div>

			<div class="label">Expression</div>
			<div><textarea id="expr" name="expression" rows=8>{{ .Data.Trigger.Expression }}</textarea></div>

			<div></div>
			<div class="action">
			<button id="button-update" onclick="_ui.update(); return false">{{ if eq .Data.Trigger.ID 0 }}Create{{ else }}Update{{ end }}</button>
				<button id="button-run" onclick="window._ui.run(); return false">Test</button>
				<div id="run-result"></div>
			</div>
		</div>
	</form>

{{ end }}