{{ 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 }}/datapoint_values.js"></script>
	<script src="/js/{{ .VERSION }}/lib/plotly-2.32.0.min.js" charset="utf-8"></script>

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

	{{ block "timefilter" . }}{{ end }}

	{{ if eq .Data.Datapoint.Datatype "INT" }}
	<div style="margin-top: 16px">
		<input onchange="selectDisplay('graph')" name="display" type="radio" id="display-graph" {{ if $graph }} checked {{ end}}> <label for="display-graph">Graph</label>
		<br>
		<input onchange="selectDisplay('list')"  name="display" type="radio" id="display-list" {{ if not $graph }} checked {{ end }}> <label for="display-list">List</label>
	</div>
	{{ end }}

	<script type="text/javascript">
		const inputDisplay = document.createElement('input')
		inputDisplay.id = 'input-display'
		inputDisplay.type = 'hidden'
		inputDisplay.name = 'display'
		inputDisplay.value = '{{ if $graph }}graph{{ else }}list{{ end }}'
		document.getElementById('form-time-selector').append(inputDisplay)
	</script>

	{{ if $graph }}
	<div class="graph">
		<div id="graph-values"></div>
	</div>

	<div style="margin-top: 8px;">
		<b>Number of values:</b>
		<span id="num-values">{{ len .Data.Values }}</span>
	</div>
	<script type="text/javascript">
		new Graph(
			{{ .Data.Datapoint.ID }},
			{{ .Data.Values }},
		)
	</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">{{ .Value }}</div>
		{{ end }}
	</div>
	{{ end }}
{{ end }}