kot.pink
1{{ define "title" }}notifications{{ end }}
2
3{{ define "content" }}
4 <div class="px-6 py-4">
5 <div class="flex items-center justify-between">
6 <p class="text-xl font-bold dark:text-white">Notifications</p>
7 <a href="/settings/notifications" class="flex items-center gap-2">
8 {{ i "settings" "w-4 h-4" }}
9 preferences
10 </a>
11 </div>
12 </div>
13
14 {{if .Notifications}}
15 <div class="flex flex-col gap-2" id="notifications-list">
16 {{range .Notifications}}
17 {{template "notifications/fragments/item" .}}
18 {{end}}
19 </div>
20
21 {{else}}
22 <div class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
23 <div class="text-center py-12">
24 <div class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600">
25 {{ i "bell-off" "w-16 h-16" }}
26 </div>
27 <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No notifications</h3>
28 <p class="text-gray-600 dark:text-gray-400">When you receive notifications, they'll appear here.</p>
29 </div>
30 </div>
31 {{end}}
32
33 {{ template "pagination" . }}
34{{ end }}
35
36{{ define "pagination" }}
37 <div class="flex justify-end mt-4 gap-2">
38 {{ if gt .Page.Offset 0 }}
39 {{ $prev := .Page.Previous }}
40 <a
41 class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"
42 hx-boost="true"
43 href = "/notifications?offset={{ $prev.Offset }}&limit={{ $prev.Limit }}"
44 >
45 {{ i "chevron-left" "w-4 h-4" }}
46 previous
47 </a>
48 {{ else }}
49 <div></div>
50 {{ end }}
51
52 {{ $next := .Page.Next }}
53 {{ if lt $next.Offset .Total }}
54 {{ $next := .Page.Next }}
55 <a
56 class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"
57 hx-boost="true"
58 href = "/notifications?offset={{ $next.Offset }}&limit={{ $next.Limit }}"
59 >
60 next
61 {{ i "chevron-right" "w-4 h-4" }}
62 </a>
63 {{ end }}
64 </div>
65{{ end }}