{{ define "page" }}
	{{ $version := .VERSION }}
	{{ $theme := .CONFIG.THEME }}
	<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 }}/{{ .CONFIG.THEME }}/problems.css">
	
	{{ block "page_label" . }}{{ end }}

	<div style="margin-bottom: 16px">
		<input {{ if eq .Data.Selection "CURRENT" }}checked{{ end }} type="radio" name="selection" id="selection-current" onclick="_ui.selectCurrent()"> <label for="selection-current">Current problems</label>
		<input {{ if eq .Data.Selection "ALL"     }}checked{{ end }} type="radio" name="selection" id="selection-all"     onclick="_ui.selectAll()"> <label for="selection-all">Time-filtered problems</label>
	</div>

	<hr>

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

	<div style="margin-top: 16px">
		<input type="radio" name="display" id="display-table" onclick="_ui.displayAreas()"> <label for="display-table">Areas</label>
		<input type="radio" name="display" id="display-list" onclick="_ui.displayList()"> <label for="display-list">List</label>
	</div>

	<div class="display-list hidden">
		<div id="problems-list">
			<div style="grid-column: 1/-1;"><h2>Unacknowledged</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 class="info" src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
						<img src="/images/{{ $version }}/{{ $theme }}/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">
						{{ if .FormattedValues }}
						<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}">
						{{ else }}
						<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
						{{ end }}

						<a href="/problem/acknowledge/{{ .ID }}">
							<img src="/images/{{ $version }}/{{ $theme }}/acknowledge-filled.svg">
						</a>
					</div>
				{{ end }}
			{{ end }}
		</div>

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

		<div id="acknowledged-list" class="hidden">
			<div style="grid-column: 1/-1;"><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">
					{{ if .FormattedValues }}
					<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}">
					{{ else }}
					<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
					{{ end }}
					<a href="/problem/unacknowledge/{{ .ID }}"><img src="/images/{{ $version }}/{{ $theme }}/acknowledge-outline.svg"></a>
				</div>
			{{ end }}
		</div>
	</div>

	<div class="display-areas hidden">
		<div id="areas">
			{{ range $areaName, $sections := .Data.ProblemsGrouped }}
			<div class="area">
				<div class="name">{{ $areaName }}</div>

				{{ range $sectionName, $problems := $sections }}
				<div class="section problems">
					<div class="name">{{ $sectionName }}</div>

					{{ range $problems }}
					<div>{{ if .IsArchived }}<span class="ok">Archived</span>{{ else }}<span class="error">Current</span>{{ end }}</div>

					<div class="trigger">{{ .TriggerName }}</div>

					{{ if eq (.Start | html) "0001-01-01 00:00:00 +0000 UTC" }}
					<div class="since"></div>
					{{ else }}
					<div class="since">{{ format_time .Start }}</div>
					{{ end }}

					{{ if .FormattedValues }}
					<div><img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}"></div>
					{{ else }}
					<div><img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg"></div>
					{{ end }}

					{{ end }}
				</div>
				{{ end }}
			</div>
			{{ end }}
		</div>
	</div>

	<script type="text/javascript">
		const form = document.getElementById('form-time-selector')
		const inputSelection = document.createElement('input')
		inputSelection.type = 'hidden'
		inputSelection.name = 'selection'
		inputSelection.value = '{{ if eq .Data.Selection "ALL" }}all{{ else }}current{{ end }}'
		form.append(inputSelection)
	</script>

{{ end }}