kot.pink
1{{ define "strings/fragments/form" }}
2 <form
3 {{ if eq .Action "new" }}
4 hx-post="/strings/new"
5 {{ else }}
6 hx-post="/strings/{{.String.Did}}/{{.String.Rkey}}/edit"
7 {{ end }}
8 hx-indicator="#new-button"
9 class="p-6 pb-4 dark:text-white flex flex-col gap-2 bg-white dark:bg-gray-800 drop-shadow-sm rounded"
10 hx-swap="none">
11 <div class="flex flex-col md:flex-row md:items-center gap-2">
12 <input
13 type="text"
14 id="filename"
15 name="filename"
16 placeholder="Filename with extension"
17 required
18 value="{{ .String.Filename }}"
19 class="md:max-w-64 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 px-3 py-2 border rounded"
20 >
21 <input
22 type="text"
23 id="description"
24 name="description"
25 value="{{ .String.Description }}"
26 placeholder="Description ..."
27 class="flex-1 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 px-3 py-2 border rounded"
28 >
29 </div>
30 <textarea
31 name="content"
32 id="content-textarea"
33 wrap="off"
34 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
35 rows="20"
36 placeholder="Paste your string here!"
37 required>{{ .String.Contents }}</textarea>
38 <div class="flex justify-between items-center">
39 <div id="content-stats" class="text-sm text-gray-500 dark:text-gray-400">
40 <span id="line-count">0 lines</span>
41 <span class="select-none px-1 [&:before]:content-['·']"></span>
42 <span id="byte-count">0 bytes</span>
43 </div>
44 <div id="actions" class="flex gap-2 items-center">
45 {{ if eq .Action "edit" }}
46 <a class="btn flex items-center gap-2 no-underline hover:no-underline p-2 group text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 "
47 href="/strings/{{ .String.Did }}/{{ .String.Rkey }}">
48 {{ i "x" "size-4" }}
49 <span class="hidden md:inline">cancel</span>
50 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
51 </a>
52 {{ end }}
53 <button
54 type="submit"
55 id="new-button"
56 class="w-fit btn-create rounded flex items-center py-0 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 group"
57 >
58 <span class="inline-flex items-center gap-2">
59 {{ i "arrow-up" "w-4 h-4" }}
60 publish
61 </span>
62 <span class="pl-2 hidden group-[.htmx-request]:inline">
63 {{ i "loader-circle" "w-4 h-4 animate-spin" }}
64 </span>
65 </button>
66 </div>
67 </div>
68 <script>
69 (function() {
70 const textarea = document.getElementById('content-textarea');
71 const lineCount = document.getElementById('line-count');
72 const byteCount = document.getElementById('byte-count');
73 function updateStats() {
74 const content = textarea.value;
75 const lines = content === '' ? 0 : content.split('\n').length;
76 const bytes = new TextEncoder().encode(content).length;
77 lineCount.textContent = `${lines} line${lines !== 1 ? 's' : ''}`;
78 byteCount.textContent = `${bytes} byte${bytes !== 1 ? 's' : ''}`;
79 }
80 textarea.addEventListener('input', updateStats);
81 textarea.addEventListener('paste', () => {
82 setTimeout(updateStats, 0);
83 });
84 updateStats();
85 })();
86 </script>
87 <div id="error" class="error dark:text-red-400"></div>
88 </form>
89{{ end }}