{{define "tasks-tab"}}
<div class="space-y-6 text-shadow-sm"
     hx-get="/tabs/tasks"
     hx-trigger="refresh-tasks from:body"
     hx-target="#tab-content"
     hx-swap="innerHTML">

    <!-- Chains -->
    {{if .Chains}}
    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {{range .Chains}}
        <div class="bg-card bg-card-hover transition-colors rounded-lg border border-purple-400/20">
            <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
                {{if .CurrentTask}}
                <input type="checkbox"
                       hx-post="/complete-atom"
                       hx-vals='{"id": "{{.CurrentTask.ID}}", "source": "doot"}'
                       hx-target="closest div.rounded-lg"
                       hx-swap="outerHTML"
                       class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
                {{end}}
                <span class="text-lg flex-shrink-0">🔗</span>
                <div class="flex-1 min-w-0">
                    <div class="flex items-start justify-between gap-2">
                        <h3 class="text-sm text-white font-medium break-words cursor-pointer hover:underline"
                            hx-get="/chains/{{.Chain.ID}}"
                            hx-target="#chain-view-content"
                            hx-swap="innerHTML"
                            onclick="document.getElementById('chain-view-modal').classList.remove('hidden')">{{if .CurrentTask}}{{.CurrentTask.Content}}{{else}}{{.ProjectName}}{{end}}</h3>
                    </div>
                    <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/50">
                        <span class="text-purple-300/80">{{.ProjectName}} &middot; {{.Position}}/{{.Total}}</span>
                        {{if eq .Chain.Status "paused"}}<span class="text-amber-300/80">paused</span>{{end}}
                    </div>
                </div>
            </div>
        </div>
        {{end}}
    </div>
    {{end}}

    <!-- Tasks List -->
    {{if .Atoms}}
    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {{range .Atoms}}
        <div class="bg-card bg-card-hover transition-colors rounded-lg border border-white/5 {{if .IsFuture}}opacity-60{{end}}">
            <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
                <!-- Checkbox for completing -->
                <input type="checkbox"
                       hx-post="/complete-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-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
                <span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
                <div class="flex-1 min-w-0">
                    <div class="flex items-start justify-between gap-2">
                        <h3 class="text-sm {{if .IsOverdue}}text-amber-300 font-medium{{else if .IsFuture}}text-white/50 font-normal{{else}}text-white font-medium{{end}} break-words cursor-pointer hover:underline"
                            hx-get="/tasks/detail?id={{.ID}}&source={{.Source}}"
                            hx-target="#task-edit-content"
                            hx-swap="innerHTML"
                            onclick="document.getElementById('task-edit-modal').classList.remove('hidden')">{{.Title}}</h3>
                        {{if .URL}}
                        <a href="{{.URL}}" target="_blank" class="text-white/70 hover:text-white flex-shrink-0" onclick="event.stopPropagation()">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                            </svg>
                        </a>
                        {{end}}
                    </div>
                    <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/50">
                        {{if .ProjectName}}
                        <span class="text-teal-300/70">{{.ProjectName}}</span>
                        {{end}}
                        {{if .DueDate}}
                        <span class="{{if .IsOverdue}}text-amber-300/80{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
                        {{end}}
                        {{if gt .Priority 2}}
                        <span class="text-amber-300/80">P{{.Priority}}</span>
                        {{end}}
                        {{if .Description}}
                        <span class="text-white/40">+details</span>
                        {{end}}
                    </div>
                </div>
            </div>
            {{if .Description}}
            <details class="border-t border-white/10">
                <summary class="px-3 sm:px-4 py-2 text-xs text-white/50 cursor-pointer hover:bg-white/5">Tap to expand</summary>
                <div class="px-3 sm:px-4 pb-3 text-sm text-white/70">{{.Description}}</div>
            </details>
            {{end}}
        </div>
        {{end}}
    </div>
    {{else}}
    <div class="card p-6 text-center">
        <p class="text-white/50 text-sm">No current tasks.</p>
    </div>
    {{end}}

    <!-- Future Tasks (Collapsed by default) -->
    {{if .FutureAtoms}}
    <details class="mt-4">
        <summary class="bg-black/40 backdrop-blur-sm rounded-lg p-3 cursor-pointer hover:bg-black/50 transition-colors text-sm text-white/60 flex items-center justify-between">
            <span>+{{len .FutureAtoms}} later</span>
            <svg class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </summary>
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 mt-2">
            {{range .FutureAtoms}}
            <div class="bg-card bg-card-hover transition-colors 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"
                           hx-post="/complete-atom"
                           hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
                           hx-target="closest div.bg-white\\/5"
                           hx-swap="outerHTML"
                           class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
                    <span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <h3 class="text-sm text-white/50 font-normal break-words">{{.Title}}</h3>
                            {{if .URL}}
                            <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white/70 flex-shrink-0">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                </svg>
                            </a>
                            {{end}}
                        </div>
                        <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/40">
                            {{if .ProjectName}}
                            <span class="text-teal-300/60">{{.ProjectName}}</span>
                            {{end}}
                            {{if .DueDate}}
                            <span>{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
                            {{end}}
                        </div>
                    </div>
                </div>
            </div>
            {{end}}
        </div>
    </details>
    {{end}}

    <!-- Maintenance Buckets -->
    <details class="group">
        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/70 cursor-pointer hover:text-white/90 list-none">
            <span>🪣</span> Maintenance Buckets
            <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
        </summary>
        {{template "buckets-section" .}}
        <form class="mt-3 flex flex-wrap gap-2 p-3 bg-black/20 rounded-lg" hx-post="/settings/buckets" hx-target="#buckets-list" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) this.reset()">
            <input type="text" name="name" placeholder="Bucket name" required
                   class="flex-1 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 outline-none focus:ring-1 focus:ring-white/30">
            <input type="number" name="cycle_days" placeholder="Cycle (days)" required min="1"
                   class="w-28 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 outline-none focus:ring-1 focus:ring-white/30">
            <input type="number" name="pick_n" placeholder="Pick N" required min="1"
                   class="w-24 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 outline-none focus:ring-1 focus:ring-white/30">
            <button type="submit" class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Create Bucket</button>
        </form>
    </details>

    <!-- Projects (read-only) -->
    <details class="group">
        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/70 cursor-pointer hover:text-white/90 list-none">
            <span>📁</span> Projects
            <span class="text-sm font-normal text-white/40">({{len .Projects}})</span>
            <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
        </summary>
        <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
            {{if .Projects}}
                {{range .Projects}}
                <div class="bg-card rounded-lg border border-white/5 flex items-center gap-3 py-2 px-3">
                    <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: {{.Color}}"></span>
                    <span class="text-sm text-white/80 truncate">{{.Name}}</span>
                </div>
                {{end}}
            {{else}}
                <div class="bg-card rounded-lg border border-white/5 col-span-full text-center text-white/40 py-6 text-sm italic">No projects yet.</div>
            {{end}}
        </div>
    </details>

    <!-- Labels (read-only) -->
    <details class="group">
        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/70 cursor-pointer hover:text-white/90 list-none">
            <span>🏷️</span> Labels
            <span class="text-sm font-normal text-white/40">({{len .Labels}})</span>
            <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
        </summary>
        <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
            {{if .Labels}}
                {{range .Labels}}
                <div class="bg-card rounded-lg border border-white/5 flex items-center gap-3 py-2 px-3">
                    <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: {{.Color}}"></span>
                    <span class="text-sm text-white/80 truncate">{{.Name}}</span>
                </div>
                {{end}}
            {{else}}
                <div class="bg-card rounded-lg border border-white/5 col-span-full text-center text-white/40 py-6 text-sm italic">No labels assigned a color yet.</div>
            {{end}}
        </div>
    </details>
</div>
{{end}}