{{ define "page" }}
	{{ $version := .VERSION }}
	<script type="module" defer>
		import {UI} from "/js/{{ .VERSION }}/problems.mjs"

		window._ui = new UI()
	</script>
	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/problems.css">
	
	{{ block "page_label" . }}{{end}}

	<input type="checkbox" id="show-acked" onclick="_ui.toggleAcknowledged(event)"> <label for="show-acked">Show acknowledged</label>

	<div id="problems-list">
		<div style="grid-column: 1/-1; margin-top: 32px;"><h2>Current</h2></div>
		
		<div class="header">Trigger</div>
		<div class="header">Area</div>
		<div class="header">Section</div>
		<div class="header">Since</div>
		{{ range .Data.Problems }}
			{{ if .Acknowledged }}
			{{ continue }}
			{{ end }}
			<div class="line"></div>

			{{ if eq .TriggerID -1  }}
				<div class="trigger">{{ .TriggerName }}</div>
				<div class="area">{{ .AreaName }}</div>
				<div class="section">{{ .SectionName }}</div>
				<div class="start"></div>
				<div class="acknowledge"><img src="/images/{{ $version }}/acknowledge.svg"></div>
			{{ else }}
				<div class="trigger"><a href="/trigger/edit/{{ .TriggerID }}">{{ .TriggerName }}</a></div>
				<div class="area">{{ .AreaName }}</div>
				<div class="section">{{ .SectionName }}</div>
				<div class="start">{{ format_time .Start }}</div>
				<div class="acknowledge"><a href="/problem/acknowledge/{{ .ID }}"><img src="/images/{{ $version }}/acknowledge-filled.svg"></a></div>
			{{ end }}
		{{ end }}
	</div>

	<div id="acknowledged-list" class="hidden">
		<div style="grid-column: 1/-1; margin-top: 32px;"><h2>Acknowledged</h2></div>
		<div class="header">Trigger</div>
		<div class="header">Area</div>
		<div class="header">Section</div>
		<div class="header">Since</div>
		
		{{ range .Data.Problems }}
			{{ if not .Acknowledged }}
			{{ continue }}
			{{ end }}
			<div class="line"></div>
			<div class="trigger"><a href="/trigger/edit/{{ .TriggerID }}">{{ .TriggerName }}</a></div>
			<div class="area">{{ .AreaName }}</div>
			<div class="section">{{ .SectionName }}</div>
			<div class="start">{{ format_time .Start }}</div>
			<div class="acknowledge"><a href="/problem/unacknowledge/{{ .ID }}"><img src="/images/{{ $version }}/acknowledge-outline.svg"></a></div>
		{{ end }}
	</div>

	<div id="areas">
		{{ range .Data.Areas }}
		<div class="area">
			<div class="name">{{ .Name }}</div>
			{{ range .SortedSections }}
			<div class="section">
				<div class="name">{{ .Name }}</div>
			</div>
			{{ end }}
		</div>
		{{ end }}
	</div>

{{ end }}