{{define "completed-atom"}}
<div class="bg-white/5 rounded-lg border border-white/5 opacity-60">
    <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
        <input type="checkbox" checked
               hx-post="/uncomplete-atom"
               hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
               hx-target="closest div.rounded-lg"
               hx-swap="outerHTML"
               class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-green-600 cursor-pointer flex-shrink-0">
        <span class="text-lg flex-shrink-0">&#10003;</span>
        <div class="flex-1 min-w-0">
            <h3 class="text-sm font-medium text-white/40 line-through break-words">{{.Title}}</h3>
            <div class="text-xs text-green-400/70 mt-1">Completed - click to undo</div>
        </div>
    </div>
</div>
{{end}}