diff options
Diffstat (limited to 'web/templates/partials/chain-detail.html')
| -rw-r--r-- | web/templates/partials/chain-detail.html | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/web/templates/partials/chain-detail.html b/web/templates/partials/chain-detail.html new file mode 100644 index 0000000..3372f03 --- /dev/null +++ b/web/templates/partials/chain-detail.html @@ -0,0 +1,52 @@ +{{define "chain-detail"}} +<div class="p-4 space-y-4"> + <div class="flex items-center justify-between gap-2"> + <div> + <h3 class="text-white font-medium">{{.ProjectName}}</h3> + <p class="text-xs text-white/50 mt-0.5"> + {{.Chain.Status}} + {{range $i, $t := .Tasks}}{{if $t.ChainUnlocked}} · step {{add $i 1}} of {{len $.Tasks}}{{end}}{{end}} + </p> + </div> + <div class="flex gap-2 flex-shrink-0"> + {{if eq .Chain.Status "active"}} + <button hx-post="/chains/{{.Chain.ID}}/pause" + hx-on::after-request="if(event.detail.successful) { htmx.trigger(document.body, 'refresh-tasks'); closeChainModal(); }" + class="text-xs px-2 py-1 rounded bg-white/10 hover:bg-white/20 text-white/70">Pause</button> + {{else if eq .Chain.Status "paused"}} + <button hx-post="/chains/{{.Chain.ID}}/resume" + hx-on::after-request="if(event.detail.successful) { htmx.trigger(document.body, 'refresh-tasks'); closeChainModal(); }" + class="text-xs px-2 py-1 rounded bg-white/10 hover:bg-white/20 text-white/70">Resume</button> + {{end}} + <button hx-post="/chains/{{.Chain.ID}}/abandon" + hx-confirm="Abandon this chain? This can't be undone." + hx-on::after-request="if(event.detail.successful) { htmx.trigger(document.body, 'refresh-tasks'); closeChainModal(); }" + class="text-xs px-2 py-1 rounded bg-red-500/10 hover:bg-red-500/20 text-red-300/80">Abandon</button> + </div> + </div> + + <div class="space-y-1"> + {{range $i, $t := .Tasks}} + <div class="flex items-start gap-2 py-2 px-2 rounded-lg {{if $t.Completed}}opacity-50{{else if not $t.ChainUnlocked}}opacity-40{{end}}"> + {{if $t.Completed}} + <span class="mt-0.5 text-green-400 flex-shrink-0">✓</span> + {{else if $t.ChainUnlocked}} + <input type="checkbox" + hx-post="/complete-atom" + hx-vals='{"id": "{{$t.ID}}", "source": "doot"}' + hx-on::after-request="if(event.detail.successful) { htmx.trigger(document.body, 'refresh-tasks'); htmx.ajax('GET', '/chains/{{$.Chain.ID}}', {target:'#chain-view-content', swap:'innerHTML'}); }" + class="mt-0.5 h-4 w-4 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0"> + {{else}} + <span class="mt-0.5 text-white/30 flex-shrink-0">🔒</span> + {{end}} + <div class="flex-1 min-w-0"> + <span class="text-sm {{if $t.Completed}}line-through text-white/50{{else if $t.ChainUnlocked}}text-white{{else}}text-white/40{{end}}">{{add $i 1}}. {{$t.Content}}</span> + {{if $t.Description}} + <p class="text-xs text-white/40 mt-0.5">{{$t.Description}}</p> + {{end}} + </div> + </div> + {{end}} + </div> +</div> +{{end}} |