{{ define "page" }}

	{{ block "page_label" . }}{{end}}
	{{ $version := .VERSION }}
	{{ $theme := .CONFIG.THEME }}
	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/notifications.css">
	<script type="text/javascript">
		function dialogClick(evt) {
			if (evt.target.tagName.toUpperCase() == 'DIALOG') {
				evt.target.close()
			}
		}
	</script>

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

	<div id="notifications">
		<div class="header">Sent</div>
		<div class="header">OK</div>
		<div class="header">Trigger name</div>
		<div class="header">Service</div>
		<div class="header">Error</div>
		{{ range .Data.Notifications }}
		<div>{{ format_time .Sent }}</div>
		<div>{{ if .OK }}<span class="ok">✔</span>{{ else }}<span class="error">✗</span>{{ end }}</div>
		<div>{{ .TriggerName }}</div>
		<div>{{ .Prio }}:{{ .Service }}</div>
		<div>
			{{ if .Error.Valid }}
			<img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" onclick="document.getElementById('error-{{ .ID }}').showModal()">
			<dialog id="error-{{ .ID }}" onclick="dialogClick(event)">
				<div style="padding: 16px 32px">
					<pre>{{ .ErrorIndented }}</pre>
					<div style="text-align: center">
						<button onclick="document.getElementById('error-{{ .ID }}').close()">Close</button>
					</div>
				</div>
			</dialog>
			{{ else }}
			<img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
			{{ end }}
		</div>
		{{ end }}
	</div>

{{ end }}