{{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}} &middot; 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}}