{{define "buckets-section"}}
<div id="buckets-list" class="grid gap-4">
    {{if .Buckets}}
        {{range .Buckets}}
        <div class="card" id="bucket-{{.Bucket.ID}}">
            <div class="flex items-center justify-between gap-4 mb-3">
                <div>
                    <strong class="text-white">{{.Bucket.Name}}</strong>
                    <span class="text-xs text-slate-400 ml-2">every {{.Bucket.CycleDays}}d, picks {{.Bucket.PickN}}</span>
                </div>
                <button class="text-xs text-red-400 hover:text-red-300 transition-colors"
                        hx-delete="/settings/buckets/{{.Bucket.ID}}"
                        hx-target="#buckets-list"
                        hx-swap="outerHTML"
                        hx-confirm="Delete bucket '{{.Bucket.Name}}'? Its tasks will be kept, just unbucketed.">
                    Delete Bucket
                </button>
            </div>

            <div class="space-y-1 mb-3">
                {{if .Items}}
                    {{range .Items}}
                    <div class="flex items-center justify-between gap-2 text-sm py-1">
                        <span class="text-slate-200">{{.Content}}</span>
                        <div class="flex items-center gap-3 flex-shrink-0">
                            <span class="text-[10px] uppercase tracking-wider {{if eq .BucketState "active"}}text-green-400{{else}}text-slate-500{{end}}">{{.BucketState}}</span>
                            <button class="text-xs text-red-400/70 hover:text-red-300 transition-colors"
                                    hx-post="/settings/buckets/items/remove"
                                    hx-vals='{"task_id": "{{.ID}}"}'
                                    hx-target="#buckets-list"
                                    hx-swap="outerHTML">
                                Remove
                            </button>
                        </div>
                    </div>
                    {{end}}
                {{else}}
                    <p class="text-xs text-slate-500 italic">Pool is empty.</p>
                {{end}}
            </div>

            <form class="flex gap-2" hx-post="/settings/buckets/{{.Bucket.ID}}/items" hx-target="#buckets-list" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) this.reset()">
                <input type="text" name="title" placeholder="Add a pool item..." required
                       class="flex-1 bg-slate-950 border border-white/10 rounded-lg px-3 py-1.5 text-sm focus:ring-1 focus:ring-blue-500 outline-none">
                <button type="submit" class="text-sm bg-slate-800 hover:bg-slate-700 text-white px-3 py-1.5 rounded-lg transition-colors">Add</button>
            </form>
        </div>
        {{end}}
    {{else}}
        <div class="card text-center text-slate-500 py-10">No maintenance buckets yet.</div>
    {{end}}
</div>
{{end}}