{{if .}}
<div class="space-y-0.5">
    {{range $task := .}}
    <div class="flex items-center gap-2.5 rounded-xl px-3 py-1.5 hover:bg-white/60 transition-all group">
        {{if eq $task.Status "done"}}
        <button hx-post="/tasks/{{$task.ID}}/toggle" hx-target="#active-tasks" hx-swap="innerHTML"
            class="w-4 h-4 rounded-md border-2 border-emerald-400 bg-emerald-400 shrink-0 flex items-center justify-center transition-colors cursor-pointer btn-press">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
        </button>
        <span class="text-[12px] text-slate-400 truncate flex-1 line-through decoration-slate-300">{{$task.Title}}</span>
        {{else}}
        <button hx-post="/tasks/{{$task.ID}}/toggle" hx-target="#active-tasks" hx-swap="innerHTML"
            class="w-4 h-4 rounded-md border-2 border-slate-300 hover:border-indigo-400 shrink-0 transition-colors cursor-pointer btn-press"></button>
        <span class="text-[12px] text-slate-600 truncate flex-1">{{$task.Title}}</span>
        {{end}}
    </div>
    {{end}}
</div>
{{else}}
<p class="text-[11px] text-slate-300 py-3 text-center">Add tasks above to track your work</p>
{{end}}