alice.pds.demo.boltless.dev
This repository has no description
1{{ define "fragments/comment/reply" }}
2 <form
3 class="p-2 group w-full border-t border-gray-200 dark:border-gray-700 flex flex-col gap-2"
4 hx-post="/comment"
5 hx-swap="none"
6 hx-trigger="submit, keydown[(ctrlKey || metaKey) && key=='Enter'] from:find textarea"
7 hx-on::before-request="this.querySelector('#comment-error').innerHTML = ''"
8 hx-disabled-elt="find button[type='submit']"
9 >
10 {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
11 {{ template "fragments/markdownEditor"
12 (dict "Name" "body"
13 "Rows" 3
14 "AutoFocus" true
15 "Placeholder" "Leave a reply...") }}
16 {{ template "replyActions" . }}
17 </form>
18{{ end }}
19
20{{ define "replyActions" }}
21 <div class="flex flex-wrap items-stretch justify-end gap-2 text-gray-500 dark:text-gray-400">
22 <div id="comment-error" class="error ml-auto"></div>
23 {{ template "cancel" . }}
24 {{ template "reply" . }}
25 </div>
26{{ end }}
27
28{{ define "cancel" }}
29 <button
30 class="btn-flat text-red-500 dark:text-red-400 flex gap-2 items-center group"
31 hx-get="/comment/reply/placeholder"
32 hx-target="closest form"
33 hx-swap="outerHTML"
34 >
35 {{ i "x" "size-4" }}
36 Cancel
37 </button>
38{{ end }}
39
40{{ define "reply" }}
41 <button
42 type="submit"
43 class="btn-create-flat flex items-center gap-2 no-underline hover:no-underline"
44 >
45 {{ i "reply" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
46 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
47 Reply
48 </button>
49{{ end }}