lewis.moe
Monorepo for Tangled
1{{ define "user/fragments/editAvatar" }}
2<form
3 hx-post="/profile/avatar"
4 hx-encoding="multipart/form-data"
5 hx-swap="none"
6 class="flex flex-col gap-2 group/form">
7 <label for="avatar-file" class="uppercase p-0">
8 Upload or Remove Avatar
9 </label>
10 <p class="text-sm text-gray-500 dark:text-gray-400">Upload a new image (PNG or JPEG, max 5MB) or remove your current avatar.</p>
11 <input
12 type="file"
13 id="avatar-file"
14 name="avatar"
15 accept="image/png,image/jpeg"
16 required
17 class="block w-full text-sm text-gray-500 dark:text-gray-400
18 file:mr-4 file:py-2 file:px-4
19 file:rounded file:border-0
20 file:text-sm file:font-semibold
21 file:bg-gray-100 file:text-gray-700
22 dark:file:bg-gray-700 dark:file:text-gray-300
23 hover:file:bg-gray-200 dark:hover:file:bg-gray-600" />
24 <div class="flex flex-col gap-2 pt-2">
25 <button type="submit" class="btn w-full flex items-center justify-center gap-2">
26 {{ i "upload" "size-4 inline group-[.htmx-request]/form:hidden" }}
27 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]/form:inline" }}
28 upload
29 </button>
30 {{ if .Profile.Avatar }}
31 <button
32 type="button"
33 hx-delete="/profile/avatar"
34 hx-confirm="Are you sure you want to remove your profile picture?"
35 hx-swap="none"
36 class="btn w-full flex items-center justify-center gap-2 group">
37 {{ i "trash-2" "size-4 inline group-[.htmx-request]:hidden" }}
38 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
39 remove avatar
40 </button>
41 {{ end }}
42 <button
43 id="cancel-avatar-btn"
44 type="button"
45 popovertarget="avatar-upload-modal"
46 popovertargetaction="hide"
47 class="btn text-red-500 dark:text-red-400 w-full flex items-center justify-center gap-2">
48 {{ i "x" "size-4" }}
49 cancel
50 </button>
51 </div>
52 <div id="avatar-error" class="text-red-500 dark:text-red-400 text-sm"></div>
53</form>
54{{ end }}