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

    <!-- Scheduled Section (Events + Timed Tasks) -->
    {{if .Scheduled}}
    <div>
        <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
            <span>⏰</span> Scheduled
        </h2>
        <div class="space-y-2">
            {{range .Scheduled}}
            <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 border-l-4 {{if eq .Type "event"}}border-l-blue-500{{else}}border-l-green-500{{end}}">
                <div class="flex items-start gap-3 p-3">
                    <span class="text-lg flex-shrink-0 mt-0.5">{{.SourceIcon}}</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">{{.Title}}</h3>
                            {{if .URL}}
                            <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white 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="text-xs text-white/50 mt-1">
                            {{if eq .Type "event"}}
                                {{if eq (.Start.Format "15:04") "00:00"}}
                                    All Day
                                {{else}}
                                    {{.Start.Format "3:04 PM"}} - {{.End.Format "3:04 PM"}}
                                {{end}}
                            {{else}}
                                {{.Start.Format "3:04 PM"}}
                            {{end}}
                        </div>
                    </div>
                </div>
            </div>
            {{end}}
        </div>
    </div>
    {{end}}

    <!-- Unscheduled Section (Tasks due today without time) -->
    {{if .Unscheduled}}
    <div>
        <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
            <span>📝</span> Today
        </h2>
        <div class="grid gap-2 sm:grid-cols-2">
            {{range .Unscheduled}}
            <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5">
                <div class="flex items-start gap-2 p-3">
                    <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 text-white font-medium break-words {{if .IsOverdue}}text-amber-300{{end}}">{{.Title}}</h3>
                            {{if .URL}}
                            <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white 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>
                        {{if gt .Priority 2}}
                        <span class="text-xs text-amber-300/80">P{{.Priority}}</span>
                        {{end}}
                    </div>
                </div>
            </div>
            {{end}}
        </div>
    </div>
    {{end}}

    <!-- Quick Add Section -->
    <div class="bg-white/5 backdrop-blur-sm rounded-lg p-4 border border-white/10">
        <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
            <span>+</span> Quick Add
        </h2>
        <form hx-post="/unified-add"
              hx-swap="none"
              hx-on::after-request="if(event.detail.successful) { this.reset(); htmx.trigger(document.body, 'refresh-tasks'); }">
            <div class="flex gap-2">
                <input type="text"
                       name="title"
                       placeholder="Add a task for today..."
                       class="flex-1 bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50"
                       required>
                <input type="hidden" name="due_date" value="{{.Today}}">
                <input type="hidden" name="source" value="todoist">
                <button type="submit"
                        class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium">
                    Add
                </button>
            </div>
        </form>
    </div>

    <!-- Upcoming Section (Next 3 days) -->
    {{if .Upcoming}}
    <div>
        <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
            <span>📆</span> Upcoming
        </h2>
        <div class="space-y-2">
            {{range .Upcoming}}
            <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 opacity-70">
                <div class="flex items-start gap-3 p-3">
                    <span class="text-lg flex-shrink-0 mt-0.5">{{.SourceIcon}}</span>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <h3 class="text-sm text-white/80 font-medium break-words">{{.Title}}</h3>
                            {{if .URL}}
                            <a href="{{.URL}}" target="_blank" class="text-white/40 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="text-xs text-white/40 mt-1">
                            {{.Start.Format "Mon, Jan 2"}}
                            {{if eq .Type "event"}}
                                {{if ne (.Start.Format "15:04") "00:00"}}
                                    at {{.Start.Format "3:04 PM"}}
                                {{end}}
                            {{else}}
                                {{if or (ne .Start.Hour 0) (ne .Start.Minute 0)}}
                                    at {{.Start.Format "3:04 PM"}}
                                {{end}}
                            {{end}}
                        </div>
                    </div>
                </div>
            </div>
            {{end}}
        </div>
    </div>
    {{end}}

    <!-- Empty state if nothing scheduled -->
    {{if and (not .Scheduled) (not .Unscheduled) (not .Upcoming)}}
    <div class="text-center py-8 text-white/50">
        <p>No scheduled items for the next few days.</p>
    </div>
    {{end}}
</div>
{{end}}