kot.pink
1{{ define "title" }}knots{{ end }}
2{{ define "content" }}
3 <div class="p-6">
4 <p class="text-xl font-bold dark:text-white">Knots</p>
5 </div>
6 <div class="flex flex-col">
7 <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">register a knot</h2>
8 <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
9 <p class="mb-8 dark:text-gray-300">Generate a key to initialize your knot server.</p>
10 <form
11 hx-post="/knots/key"
12 class="max-w-2xl mb-8 space-y-4"
13 >
14 <input
15 type="text"
16 id="domain"
17 name="domain"
18 placeholder="knot.example.com"
19 required
20 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
21 />
22 <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">
23 generate key
24 </button>
25 <div id="settings-knots-error" class="error dark:text-red-400"></div>
26 </form>
27 </section>
28
29 <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">my knots</h2>
30 <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
31 <div id="knots-list" class="flex flex-col gap-6 mb-8">
32 {{ range .Registrations }}
33 {{ if .Registered }}
34 <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
35 <div class="flex flex-col gap-1">
36 <div class="inline-flex items-center gap-4">
37 {{ i "git-branch" "w-3 h-3 dark:text-gray-300" }}
38 <a href="/knots/{{ .Domain }}">
39 <p class="font-bold dark:text-white">{{ .Domain }}</p>
40 </a>
41 </div>
42 <p class="text-sm text-gray-500 dark:text-gray-400">owned by {{ .ByDid }}</p>
43 <p class="text-sm text-gray-500 dark:text-gray-400">registered {{ .Registered | timeFmt }}</p>
44 </div>
45 </div>
46 {{ end }}
47 {{ else }}
48 <p class="text-sm text-gray-500 dark:text-gray-400">No knots registered</p>
49 {{ end }}
50 </div>
51 </section>
52
53 <h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">pending registrations</h2>
54 <section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
55 <div id="pending-knots-list" class="flex flex-col gap-6 mb-8">
56 {{ range .Registrations }}
57 {{ if not .Registered }}
58 <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
59 <div class="flex flex-col gap-1">
60 <div class="inline-flex items-center gap-4">
61 <p class="font-bold dark:text-white">{{ .Domain }}</p>
62 <div class="inline-flex items-center gap-1">
63 <span class="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-2 py-1 rounded">
64 pending
65 </span>
66 </div>
67 </div>
68 <p class="text-sm text-gray-500 dark:text-gray-400">opened by {{ .ByDid }}</p>
69 <p class="text-sm text-gray-500 dark:text-gray-400">created {{ .Created | timeFmt }}</p>
70 </div>
71 <div class="flex gap-2 items-center">
72 <button
73 class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 gap-2"
74 hx-post="/knots/{{ .Domain }}/init">
75 {{ i "square-play" "w-5 h-5" }}
76 <span class="hidden md:inline">initialize</span>
77 </button>
78 </div>
79 </div>
80 {{ end }}
81 {{ else }}
82 <p class="text-sm text-gray-500 dark:text-gray-400">No pending registrations</p>
83 {{ end }}
84 </div>
85 </section>
86 </div>
87{{ end }}