68 lines
1.8 KiB
HTML
68 lines
1.8 KiB
HTML
{{ block "index" . }}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="https://unpkg.com/htmx.org/dist/htmx.min.js"></script>
|
|
<title></title>
|
|
<link href="/css/index.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
{{ template "form" .Form }}
|
|
<hr />
|
|
{{ template "display" .Data }}
|
|
</body>
|
|
</html>
|
|
{{ end }}
|
|
|
|
{{ block "form" . }}
|
|
<form hx-swap="outerHTML" hx-post="/guestbook">
|
|
Name: <input
|
|
{{ if .Values.name }} value="{{ .Values.name }}" {{ end }}
|
|
type="text" name="name" />
|
|
Message: <input
|
|
{{ if .Values.message }} value="{{ .Values.message }}" {{ end }}
|
|
type="text" name="message" />
|
|
|
|
{{ if .Errors.message }}
|
|
<span style="color: red">{{ .Errors.message }}</span>
|
|
{{ end }}
|
|
<button>Sign guestbook</button>
|
|
</form>
|
|
{{ end }}
|
|
|
|
{{ block "display" . }}
|
|
<div id="guestbook" style="display: flex; flex-direction: column">
|
|
{{ range .Entries }}
|
|
{{ template "entry" . }}
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ block "entry" . }}
|
|
<div class="entry" id="entry-{{ .Id }}" style="display: flex;">
|
|
<div style="width: 1rem; cursor: pointer;"
|
|
hx-indicator="#entry-{{ .Id }}-indicator"
|
|
hx-target="#entry-{{ .Id }}"
|
|
hx-swap="outerHTML swap:500ms"
|
|
hx-delete="/guestbook/{{ .Id }}"
|
|
>
|
|
<img src="/images/trash.svg" alt="delete" style="width: 1rem;" />
|
|
</div>
|
|
Name: <span>{{ .Name }}</span>
|
|
Message: <span>{{ .Message }}</span>
|
|
|
|
<div id="entry-{{ .Id }}-indicator" class="htmx-indicator">
|
|
<img src="/images/bars.svg" alt="loading" style="width: 1rem;" />
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ block "oob-entry" . }}
|
|
<div id="guestbook" hx-swap-oob="afterbegin">
|
|
{{ template "entry" . }}
|
|
</div>
|
|
{{ end }}
|
|
|