{{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">
    <!-- 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 .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 .DueDate}}
                            <span>{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
                            {{end}}
                        </div>
                    </div>
                </div>
            </div>
            {{end}}
        </div>
    </details>
    {{end}}
</div>
{{end}}