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

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

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

	<form id="form-trigger" action="/trigger/update/{{ .Data.Trigger.ID }}" method="post">
	<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">
		{{ range .Data.Datapoints }}
			<div class="datapoint name"><b>{{ .Name }}</b></div>
			<div class="datapoint value">{{ .LastDatapointValue.Value }}</div>
		{{ end }}
		</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">Update</button>
			<button id="button-run" onclick="window._ui.run(); return false">Test</button>
			<div id="run-result"></div>
		</div>
	</form>

{{ end }}