{{ define "page" }}
<h1>Pushover</h1>
<style>
.grid {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-gap: 8px 16px;
	align-items: center;
	margin-top: 32px;
}

input[type=number] {
	width: 64px;
	padding: 4px;
}

button {
	margin-top: 16px;
}

div.grid > div {
	white-space: nowrap;
}
</style>

<form action="/configuration/notification/update/{{ if .Data.Service.Exists }}{{ .Data.Service.GetPrio }}{{ else }}-1{{ end }}" method="post">
	<input type="hidden" name="type" value="PUSHOVER">
	<div class="grid">
		<div>Prio:</div>
		<input type="number" min=0 name="prio" value="{{ .Data.Service.GetPrio }}">

		<div>Description</div>
		<input type="text" name="description" value="{{ .Data.Service.Description }}" style="width: 100%">

		<div>User key: <span class="error">*</span></div>
		<input type="text" name="user_key" value="{{ .Data.Service.UserKey }}" style="width: 100%">

		<div>API (application) key: <span class="error">*</span></div>
		<input type="text" name="api_key" value="{{ .Data.Service.APIKey }}" style="width: 100%">

		<div>Device name:</div>
		<input type="text" name="device_name" value="{{ .Data.Service.DeviceName }}" style="width: 100%">

		<button style="grid-column: 1 / -1; width: min-content;">OK</button>
	</div>
</form>
{{ end }}