yoten.app
Yōten: A social platform for tracking the essential points of your language learning
yoten.app
1.3 kB
47 lines
1package editcomment
2
3import "yoten.app/internal/server/ui"
4
5templ EditComment(params EditCommentProps) {
6 <form
7 hx-post={ templ.SafeURL("/comment/edit/" + params.Comment.RKey) }
8 hx-swap="outerHTML"
9 hx-disabled-elt="#update-comment-button,#cancel-comment-button"
10 x-data="{ text: '' }"
11 x-init="text = $el.querySelector('textarea').value; lucide.createIcons();"
12 >
13 <div class="mt-2">
14 <textarea
15 x-model="text"
16 id="comment"
17 name="comment"
18 placeholder="Share your thoughts about this study session..."
19 class="input w-full"
20 maxLength="256"
21 rows="3"
22 >
23 { params.Comment.Body }
24 </textarea>
25 <div class="flex justify-between mt-2">
26 <div class="text-sm text-text-muted">
27 <span x-text="text.length"></span> / 256
28 </div>
29 <div class="flex items-center gap-2">
30 <button type="submit" id="update-comment-button" class="btn btn-primary w-fit">
31 Update Comment
32 </button>
33 <button
34 hx-get={ templ.SafeURL("/comment/cancel/" + params.Comment.RKey) }
35 hx-target={ "#" + ui.SanitiseHtmlId(params.Comment.CommentAt().String()) + "-body" }
36 hx-swap="innerHTML"
37 type="button"
38 id="cancel-comment-button"
39 class="btn btn-muted w-fit"
40 >
41 Cancel
42 </button>
43 </div>
44 </div>
45 </div>
46 </form>
47}