blob: 0b176cd191c25524ed3897c82cdfad0cc8244c16 (
plain)
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
{{define "trello-board"}}
<div class="board-card">
<!-- Board Header -->
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg text-gray-900">{{.Name}}</h3>
</div>
<!-- Add Card Form (Collapsible) -->
{{if .Lists}}
<details class="mb-4">
<summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors">
+ Add Card
</summary>
<form hx-post="/cards"
hx-target="closest .board-card"
hx-swap="outerHTML"
class="mt-3 space-y-2 bg-white/40 p-3 rounded-lg">
<input type="hidden" name="board_id" value="{{.ID}}">
<select name="list_id"
required
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
<option value="">Select list...</option>
{{range .Lists}}
<option value="{{.ID}}">{{.Name}}</option>
{{end}}
</select>
<input type="text"
name="name"
placeholder="Card title"
required
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
<button type="submit"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
Add Card
</button>
</form>
</details>
{{end}}
<!-- Cards List -->
<div class="space-y-3 max-h-96 overflow-y-auto scrollbar-thin">
{{range .Cards}}
<div class="trello-card-item">
<div class="flex items-start gap-2">
<!-- Complete Checkbox -->
<input type="checkbox"
hx-post="/cards/complete"
hx-vals='{"card_id": "{{.ID}}"}'
hx-target="closest .trello-card-item"
hx-swap="outerHTML"
class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
<div class="flex-1">
<p class="font-medium text-sm text-gray-900 mb-2">{{.Name}}</p>
<div class="flex flex-wrap gap-2 items-center">
{{if .ListName}}
<span class="badge bg-gray-100 text-gray-700">
{{.ListName}}
</span>
{{end}}
{{if .DueDate}}
<span class="badge bg-red-100 text-red-800">
Due: {{.DueDate.Format "Jan 2"}}
</span>
{{end}}
{{if .URL}}
<a href="{{.URL}}" target="_blank"
class="text-trello hover:text-trello/80 text-xs font-medium ml-auto transition-colors">
View →
</a>
{{end}}
</div>
</div>
</div>
</div>
{{end}}
</div>
</div>
{{end}}
|
