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"
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 font-mono"
35 rows="20"
36 spellcheck="false"
37 placeholder="Paste your string here!"
38 required>{{ .String.Contents }}</textarea>
39 <div class="flex justify-between items-center">
40 <div id="content-stats" class="text-sm text-gray-500 dark:text-gray-400">
41 <span id="line-count">0 lines</span>
42 <span class="select-none px-1 [&:before]:content-['·']"></span>
43 <span id="byte-count">0 bytes</span>
44 </div>
45 <div id="actions" class="flex gap-2 items-center">
46 {{ if eq .Action "edit" }}
47 <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 "
48 href="/strings/{{ .String.Did }}/{{ .String.Rkey }}">
49 {{ i "x" "size-4" }}
50 <span class="hidden md:inline">cancel</span>
51 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
52 </a>
53 {{ end }}
54 <button
55 type="submit"
56 id="new-button"
57 class="w-fit btn-create rounded flex items-center py-0 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 group"
58 >
59 <span class="inline-flex items-center gap-2">
60 {{ i "arrow-up" "w-4 h-4" }}
61 publish
62 </span>
63 <span class="pl-2 hidden group-[.htmx-request]:inline">
64 {{ i "loader-circle" "w-4 h-4 animate-spin" }}
65 </span>
66 </button>
67 </div>
68 </div>
69 <script>
70 (function() {
71 const textarea = document.getElementById('content-textarea');
72 const lineCount = document.getElementById('line-count');
73 const byteCount = document.getElementById('byte-count');
74 function updateStats() {
75 const content = textarea.value;
76 const lines = content === '' ? 0 : content.split('\n').length;
77 const bytes = new TextEncoder().encode(content).length;
78 lineCount.textContent = `${lines} line${lines !== 1 ? 's' : ''}`;
79 byteCount.textContent = `${bytes} byte${bytes !== 1 ? 's' : ''}`;
80 }
81 textarea.addEventListener('input', updateStats);
82 textarea.addEventListener('paste', () => {
83 setTimeout(updateStats, 0);
84 });
85 updateStats();
86 })();
87 </script>
88 <div id="error" class="error dark:text-red-400"></div>
89 </form>
90{{ end }}