1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
{{ define "content" }}
<p class="bg-size-200 bg-pos-0 hover:bg-pos-100
bg-gradient-to-br from-slate-800 via-zinc-600 to-amber-500
bg-clip-text text-lg font-bold text-transparent
transition-all duration-500"
>
Tags
</p>
<form class="flex flex-col" action="/api/tags/new" method="POST">
<p class="text-sm" for="tag">New Tag</p>
<div class="flex gap-2">
<input class="tixe-input h-8 w-full" type="text" placeholder="..." name="tag" id="tag"/>
<button class="group w-fit h-8 p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
<svg class="absolute h-5 w-5 stroke-emerald-600 group-hover:stroke-emerald-700 transition-colors" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<svg class="group-hover:animate-[fullrotate_500ms_ease-in-out] h-5 w-5 stroke-emerald-600 group-hover:stroke-emerald-700 transition-colors" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</button>
</div>
</form>
<div class="grid w-fit">
<div class="flex items-center gap-4 text-sm ml-2 mr-8">
<p class="w-max">Name</p>
<p class="w-full">Uses</p>
</div>
{{ range $tag := .data.Tags }}
<div class="flex items-center gap-1 py-1 px-2 rounded-md odd:bg-slate-200 even:bg-slate-100">
<p class="w-max">{{ $tag.Tag }}</p>
<div class="flex flex-row-reverse w-full">
<p>{{ $tag.TimesUsed }}</p>
</div>
<form class="min-w-max" action="/api/tags/delete" method="POST">
<input class="hidden" type="text" name="id" id="id" value="{{ $tag.Id }}"/>
<button class="flex items-center" type="submit">
<div class="group h-5 w-5">
<div class="absolute group-hover:animate-lidjump">
<svg class="group-hover:animate-lidflip h-fit w-5 stroke-rose-600" viewBox="0 0 24 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5001 6H3.5" stroke-width="1.5" stroke-linecap="round" />
<path d="M6.5 6C6.55588 6 6.58382 6 6.60915 5.99936C7.43259 5.97849 8.15902 5.45491 8.43922 4.68032C8.44784 4.65649 8.45667 4.62999 8.47434 4.57697L8.57143 4.28571C8.65431 4.03708 8.69575 3.91276 8.75071 3.8072C8.97001 3.38607 9.37574 3.09364 9.84461 3.01877C9.96213 3 10.0932 3 10.3553 3H13.6447C13.9068 3 14.0379 3 14.1554 3.01877C14.6243 3.09364 15.03 3.38607 15.2493 3.8072C15.3043 3.91276 15.3457 4.03708 15.4286 4.28571L15.5257 4.57697C15.5433 4.62992 15.5522 4.65651 15.5608 4.68032C15.841 5.45491 16.5674 5.97849 17.3909 5.99936C17.4162 6 17.4441 6 17.5 6" stroke-width="1.5" />
</svg>
</div>
<svg class="h-5 w-5 stroke-rose-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 11L10 16" stroke-width="1.5" stroke-linecap="round" />
<path d="M14.5 11L14 16" stroke-width="1.5" stroke-linecap="round" />
<path d="M18.3735 15.3991C18.1965 18.054 18.108 19.3815 17.243 20.1907C16.378 21 15.0476 21 12.3868 21H11.6134C8.9526 21 7.6222 21 6.75719 20.1907C5.89218 19.3815 5.80368 18.054 5.62669 15.3991L5.16675 8.5M18.8334 8.5L18.6334 11.5" stroke-width="1.5" stroke-linecap="round" />
</svg>
</div>
</button>
</form>
</div>
{{ end }}
</div>
{{ end }}