{{define "head" -}}
		<script src="/static/htmx.min.js"></script>
		<title>Notepad</title>

		<meta name="viewport" content="interactive-widget=resizes-content"> <!-- https://stackoverflow.com/q/76026292 -->
{{- end}}

{{define "body" -}}
		<form id="form" method="post">
			<div class="save-indicator-container">
			{{- block "saveIndicator" ""}}
				<span id="save-indicator">{{.}}</span>
			{{- end}}
			</div>
			<div class="content-container">
				<textarea
						name="content"
						hx-post="/notepad"
						hx-on:input="
							const indicator = htmx.find('#save-indicator');
							htmx.addClass(indicator, 'htmx-indicator');
							indicator.innerHTML = 'Saving...';
						"
						hx-trigger="input delay:1s"
						hx-indicator="#save-indicator"
						hx-target="#save-indicator"
						hx-swap="outerHTML"
						autofocus>
					{{- .Content -}}
				</textarea>
			</div>
		</form>
{{- end}}