{{ define "timefilter" }}
<script type="text/javascript">
	function preset(hours) {
		const inputPreset = document.querySelector('input[name="time-preset"]')
		inputPreset.value = hours
		inputPreset.form.submit()
	}

	function offsetTime(seconds) {
		const el = document.querySelector('input[name="time-offset"]')
		el.value = seconds
		el.form.submit()
	}

	function enterHandler(evt) {
		if (evt.key == 'Enter')
			document.getElementById('form-time-selector').submit()
	}
</script>


<form action="{{ .Data.TimeSubmit }}" method="get" id="form-time-selector" class="{{ if .Data.TimeHidden }}hidden{{ end }}">
	<input type="hidden" name="time-preset" value="">
	<input type="hidden" name="time-offset" value=0>

	<div id="time-selector">
		{{/* ====== Row 1 ====== */}}
		<div></div>
		<div class="header" style="grid-column: 2 / 6">Date and time</div>

		<div></div>
		<div class="vertical-line" style="grid-column: 7; grid-row: 1 / 5; height: 100%">&nbsp;</div>
		<div></div>

		<div class="header" style="grid-column: 9 / 16">Offsets</div>

		<div></div>
		<div class="vertical-line" style="grid-column: 17; grid-row: 1 / 5; height: 100%"></div>
		<div></div>

		<div class="header" style="grid-column: 19 / 21">Presets</div>
		<div></div>




		{{/* ====== Row 2 ====== */}}
		<div></div>
		<div>From</div>
		<input name="time-f" value="{{ .Data.TimeFrom }}" type="datetime-local" onkeydown="enterHandler(event)">
		<div></div>
		<div></div>

		<div></div>
		{{/* Vertical line */}}
		<div></div>

		<div><a href="#" onclick="offsetTime(-3600)">◀</a></div>
		<div>Hour</div>
		<div><a href="#" onclick="offsetTime(3600)">▶</a></div>

		<div></div>

		<div><a href="#" onclick="offsetTime(-7 * 86400)">◀</a></div>
		<div>Week</div>
		<div><a href="#" onclick="offsetTime(7 * 86400)">▶</a></div>

		<div></div>
		{{/* Vertical line */}}
		<div></div>

		<div class="preset">⚫︎ <a href="#" onclick="preset(1)">Last hour</a></div>
		<div class="preset">⚫︎ <a href="#" onclick="preset(24 * 7)">Last 7 days</a></div>
		<div></div>




		{{/* ====== Row 3 ====== */}}
		<div></div>
		<div>To</div>
		<input name="time-t" value="{{ .Data.TimeTo   }}" type="datetime-local" onkeydown="enterHandler(event)">
		<div><img src="/images/{{ .VERSION }}/{{ .CONFIG.THEME }}/forward.svg" onclick="document.getElementById('form-time-selector').submit()"></div>
		<div></div>

		<div></div>
		{{/* Vertical line */}}
		<div></div>

		<div><a href="#" onclick="offsetTime(-86400)">◀</a></div>
		<div>Day</div>
		<div><a href="#" onclick="offsetTime(86400)">▶</a></div>

		<div></div>

		<div><a href="#" onclick="offsetTime(-31 * 86400)">◀</a></div>
		<div>Month</div>
		<div><a href="#" onclick="offsetTime(31 * 86400)">▶</a></div>

		<div></div>
		{{/* Vertical line */}}
		<div></div>

		<div class="preset">⚫︎ <a href="#" onclick="preset(24)">Last 24 hours</a></div>
		<div class="preset">⚫︎ <a href="#" onclick="preset(24 * 31)">Last 31 days</a></div>

		<div></div>




		{{/* ====== Row 4 ====== */}}
		<div style="grid-column: 1 / 5; height: 8px"></div>
		<div style="grid-column: 8 / 17; height: 8px"></div>
		<div style="grid-column: 18 / 22; height: 8px"></div>
	</div>
</form>
{{ end }}