1{{ define "title" }}knots{{ end }}
2
3{{ define "content" }}
4 <h1>knots</h1>
5
6 <section class="mb-12">
7 <h2 class="text-2xl mb-4">register a knot</h2>
8 <form hx-post="/knots/key" class="flex gap-4 items-end">
9 <div>
10 <label for="domain"
11 >Generate a key to start your knot with.</label
12 >
13 <input
14 type="text"
15 id="domain"
16 name="domain"
17 placeholder="knot.example.com"
18 required
19 />
20 </div>
21 <button class="btn" type="submit">generate key</button>
22 </form>
23 </section>
24
25 <section class="mb-12">
26 <h3 class="text-xl font-semibold mb-4">my knots</h3>
27 <p>This is a list of knots</p>
28 <ul id="my-knots" class="space-y-6">
29 {{ range .Registrations }}
30 {{ if .Registered }}
31 <li class="border rounded p-4 flex flex-col gap-2">
32 <div>
33 <a href="/knots/{{ .Domain }}" class="font-semibold"
34 >{{ .Domain }}</a
35 >
36 </div>
37 <div class="text-gray-600">
38 Owned by
39 {{ .ByDid }}
40 </div>
41 <div class="text-gray-600">
42 Registered on
43 {{ .Registered }}
44 </div>
45 </li>
46 {{ end }}
47 {{ else }}
48 <p class="text-gray-600">you don't have any knots yet</p>
49 {{ end }}
50 </ul>
51 </section>
52
53 <section>
54 <h3 class="text-xl font-semibold mb-4">pending registrations</h3>
55 <ul id="pending-registrations" class="space-y-6">
56 {{ range .Registrations }}
57 {{ if not .Registered }}
58 <li class="border rounded p-4 flex flex-col gap-2">
59 <div>
60 <a
61 href="/knots/{{ .Domain }}"
62 class="text-blue-600 hover:underline"
63 >{{ .Domain }}</a
64 >
65 </div>
66 <div class="text-gray-600">
67 Opened by
68 {{ .ByDid }}
69 </div>
70 <div class="text-gray-600">
71 Created on
72 {{ .Created }}
73 </div>
74 <div class="flex items-center gap-4 mt-2">
75 <span class="text-amber-600"
76 >pending registration</span
77 >
78 <button
79 class="btn"
80 hx-post="/knots/{{ .Domain }}/init"
81 >
82 initialize
83 </button>
84 </div>
85 </li>
86 {{ end }}
87 {{ else }}
88 <p class="text-gray-600">no registrations yet</p>
89 {{ end }}
90 </ul>
91 </section>
92{{ end }}