{{ define "page" }}
	{{ $version := .VERSION }}
	{{ $graph := and (eq .Data.Display "graph") (eq .Data.Datapoint.Datatype "INT") }}
	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/datapoints.css">
	<script src="/js/{{ .VERSION }}/lib/plotly-2.32.0.min.js" charset="utf-8"></script>

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

	<form action="/datapoint/values/{{ .Data.Datapoint.ID }}" method="get">
		{{ if eq .Data.Datapoint.Datatype "INT" }}
		<div>
			<input name="display" value="graph" type="radio" id="display-graph" {{ if $graph }} checked {{ end}}> <label for="display-graph">Graph</label>
			<input name="display" value="list" type="radio" id="display-list" {{ if not $graph }} checked {{ end }}> <label for="display-list">List</label>
		</div>
		{{ end }}

		<input name="f" type="datetime-local" step="1" value="{{ .Data.TimeFrom }}">
		<input name="t" type="datetime-local" step="1" value="{{ .Data.TimeTo }}">
		<button>OK</button>
	</form>
	<br><br>

	{{ if $graph }}
	<div class="graph">
		<div id="graph-values"></div>
	</div>
	<script type="text/javascript">
		const graphValues = document.getElementById('graph-values');
		let data = {{ .Data }}
		let x = data.Values.map(d => d.Ts)
		let y = data.Values.map(d => d.ValueInt.Int64)
		Plotly.newPlot(
			graphValues,
			[
				{
					x,
					y,
				},
			], {
				margin: { t: 0 },
			}
		);
	</script>
	{{ else }}
	<div id="values">
		<div class="header">Value added</div>
		<div class="header">Value</div>
		<div class="line"></div>
		{{ range .Data.Values }}
		<div class="value">{{ format_time .Ts }}</div>
		<div class="value">{{ format_time .Value }}</div>
		{{ end }}
	</div>
	{{ end }}
{{ end }}