{{define "timeline-tab"}}
<style>
    .calendar-grid {
        position: relative;
        border-left: 2px solid rgba(255,255,255,0.2);
        margin-left: 56px;
    }
    .calendar-hour {
        position: relative;
        height: 40px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .calendar-hour-label {
        position: absolute;
        left: -56px;
        top: -9px;
        font-size: 0.8rem;
        font-weight: 500;
        color: rgba(255,255,255,0.6);
        width: 50px;
        text-align: right;
    }
    .now-line {
        position: absolute;
        left: -8px;
        right: 0;
        height: 2px;
        background: #ef4444;
        z-index: 5;
    }
    .now-line::before {
        content: 'NOW';
        position: absolute;
        left: -48px;
        top: -7px;
        font-size: 0.65rem;
        font-weight: 600;
        color: #ef4444;
        letter-spacing: 0.05em;
    }
    .now-dot {
        position: absolute;
        left: -5px;
        top: -4px;
        width: 10px;
        height: 10px;
        background: #ef4444;
        border-radius: 50%;
    }
    .calendar-event {
        position: absolute;
        left: 8px;
        right: 8px;
        background: rgba(0,0,0,0.5);
        border-radius: 6px;
        padding: 4px 8px;
        font-size: 0.8em;
        border-left: 3px solid;
        overflow: hidden;
        z-index: 1;
        backdrop-filter: blur(4px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .calendar-event.hover-active {
        z-index: 10;
        background: rgba(0,0,0,0.7);
    }
    .calendar-event.source-trello { border-color: #0079bf; }
    .calendar-event.source-plantoeat { border-color: #5cb85c; }
    .calendar-event.source-calendar { border-color: #9b59b6; }
    .calendar-event.source-gtasks { border-color: #f39c12; }
    .calendar-event-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: white;
        font-weight: 500;
    }
    .calendar-event-time {
        font-size: 0.75em;
        color: rgba(255,255,255,0.6);
    }
    .untimed-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(0,0,0,0.4);
        padding: 4px 10px;
        border-radius: 4px;
        margin: 2px;
        font-size: 0.85em;
        border-left: 3px solid;
    }
    .untimed-item.source-trello { border-color: #0079bf; }
    .untimed-item.source-plantoeat { border-color: #5cb85c; }
    .untimed-item.source-calendar { border-color: #9b59b6; }
    .untimed-item.source-gtasks { border-color: #f39c12; }
    .untimed-item.overdue { opacity: 0.8; }
    .overdue-badge {
        background: rgba(220,53,69,0.3);
        color: #ff6b6b;
        font-size: 0.65em;
        padding: 1px 4px;
        border-radius: 3px;
    }
</style>

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

    <!-- Today Section (Calendar View) — always shown so the NOW line is visible -->
    <details class="group" open>
        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90 cursor-pointer hover:text-white sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none">
            <span>📅</span> {{.TodayLabel}}
            <span class="text-sm font-normal text-white/50">({{len .TodayItems}} items)</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>

        <!-- Overdue + All-Day + Multi-Day + Untimed Items Section -->
        {{$hasUntimed := false}}{{range .TodayItems}}{{if or .IsOverdue .IsAllDay (ne .MultiDayVariant "")}}{{$hasUntimed = true}}{{end}}{{end}}
        {{if $hasUntimed}}
        <div class="mb-4 flex flex-wrap gap-1 p-2 bg-black/20 rounded-lg" id="untimed-section">
            {{range .TodayItems}}
            {{if or .IsOverdue .IsAllDay (ne .MultiDayVariant "")}}
            <div class="untimed-item source-{{.Source}} {{if .IsOverdue}}overdue{{end}} {{if .IsCompleted}}opacity-50{{end}}">
                {{if or (eq .Type "task") (eq .Type "card") (eq .Type "gtask")}}
                <input type="checkbox"
                       {{if .IsCompleted}}checked{{end}}
                       hx-post="{{if .IsCompleted}}/uncomplete-atom{{else}}/complete-atom{{end}}"
                       hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"{{if .ListID}}, "listId": "{{.ListID}}"{{end}}}'
                       hx-target="closest .untimed-item"
                       hx-swap="outerHTML"
                       class="h-4 w-4 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
                {{end}}
                <span class="{{if .IsCompleted}}line-through text-white/50{{end}}">{{.Title}}{{multiDayLabel .}}</span>
                {{if .IsOverdue}}<span class="overdue-badge">overdue</span>{{end}}
                {{if .URL}}
                <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white">
                    <svg class="w-3 h-3" 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>
            {{end}}
            {{end}}
        </div>
        {{end}}

        <!-- Calendar Grid (dynamic hours) -->
        <div class="calendar-grid" id="today-calendar" data-start-hour="{{.TodayStartHour}}" data-now-hour="{{.NowHour}}" data-now-minute="{{.NowMinute}}">
            <!-- Hour rows -->
            {{range .TodayHours}}
            <div class="calendar-hour" data-hour="{{.}}">
                <span class="calendar-hour-label">{{if eq . 0}}12am{{else if lt . 12}}{{.}}am{{else if eq . 12}}12pm{{else}}{{subtract . 12}}pm{{end}}</span>
            </div>
            {{end}}
            <!-- Now line (positioned by JS) -->
            <div class="now-line" id="now-line" style="display:none;">
                <div class="now-dot"></div>
            </div>

            <!-- Timed events positioned by JavaScript -->
            {{range .TodayItems}}
            {{if and (not .IsOverdue) (not .IsAllDay) (eq .MultiDayVariant "")}}
            <div class="calendar-event source-{{.Source}} {{if .IsCompleted}}opacity-50{{end}}"
                 data-hour="{{.Time.Hour}}"
                 data-minute="{{.Time.Minute}}"
                 data-end-hour="{{if .EndTime}}{{.EndTime.Hour}}{{else}}{{.Time.Hour}}{{end}}"
                 data-end-minute="{{if .EndTime}}{{.EndTime.Minute}}{{else}}59{{end}}"
                 data-id="{{.ID}}"
                 data-source="{{.Source}}"
                 data-completed="{{.IsCompleted}}"
                 data-type="{{.Type}}"
                 data-url="{{.URL}}"
                 {{if .ListID}}data-list-id="{{.ListID}}"{{end}}
                 style="display:none;">
                <div class="flex items-center gap-2">
                    {{if or (eq .Type "task") (eq .Type "card") (eq .Type "gtask")}}
                    <input type="checkbox"
                           {{if .IsCompleted}}checked{{end}}
                           hx-post="{{if .IsCompleted}}/uncomplete-atom{{else}}/complete-atom{{end}}"
                           hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"{{if .ListID}}, "listId": "{{.ListID}}"{{end}}}'
                           hx-target="closest .calendar-event"
                           hx-swap="outerHTML"
                           onclick="event.stopPropagation();"
                           class="h-4 w-4 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
                    {{end}}
                    <span class="calendar-event-title {{if .IsCompleted}}line-through text-white/50{{end}}">{{.Title}}</span>
                </div>
                <div class="calendar-event-time">{{.Time.Format "3:04 PM"}}{{if .EndTime}} - {{.EndTime.Format "3:04 PM"}}{{end}}</div>
            </div>
            {{end}}
            {{end}}
        </div>

    </details>

    <!-- Tomorrow Section (flat chronological list, mirroring widget layout) -->
    {{if .TomorrowItems}}
    <details class="group" open>
        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/70 cursor-pointer hover:text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none">
            <span>🗓️</span> {{.TomorrowLabel}}
            <span class="text-sm font-normal text-white/50">({{len .TomorrowItems}} items)</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>

        <!-- Flat chronological list: timed items first (sorted), then untimed -->
        <div class="space-y-1 pl-1">
            {{range .TomorrowItems}}
            <div class="flex items-center gap-2 py-2 px-2 rounded-lg hover:bg-white/5 {{if .IsCompleted}}opacity-50{{end}}">
                <!-- Time label (fixed width) -->
                <span class="text-xs text-white/40 w-14 shrink-0 text-right">
                    {{if eq .MultiDayVariant ""}}
                    {{if and (not .IsAllDay) (or (ne .Time.Hour 0) (ne .Time.Minute 0))}}
                    {{.Time.Format "3:04 PM"}}
                    {{end}}
                    {{end}}
                </span>
                <!-- Source color bar -->
                <div class="w-0.5 h-5 rounded-full shrink-0
                    {{if eq .Source "calendar"}}bg-purple-400{{else if eq .Source "doot"}}bg-teal-400{{else if eq .Source "trello"}}bg-blue-400{{else if eq .Source "plantoeat"}}bg-green-400{{else if eq .Source "gtasks"}}bg-yellow-400{{else}}bg-white/30{{end}}">
                </div>
                <!-- Checkbox for tasks -->
                {{if or (eq .Type "task") (eq .Type "card") (eq .Type "gtask")}}
                <input type="checkbox"
                       {{if .IsCompleted}}checked{{end}}
                       hx-post="{{if .IsCompleted}}/uncomplete-atom{{else}}/complete-atom{{end}}"
                       hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"{{if .ListID}}, "listId": "{{.ListID}}"{{end}}}'
                       hx-target="closest div.rounded-lg"
                       hx-swap="outerHTML"
                       class="h-4 w-4 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer shrink-0">
                {{end}}
                <!-- Title -->
                <span class="flex-1 text-sm text-white/80 {{if .IsCompleted}}line-through text-white/40{{end}} truncate">
                    {{.Title}}{{multiDayLabel .}}
                    {{if and (eq .MultiDayVariant "") .EndTime}}<span class="text-white/30 text-xs ml-1">– {{.EndTime.Format "3:04 PM"}}</span>{{end}}
                </span>
                {{if .URL}}
                <a href="{{.URL}}" target="_blank" class="text-white/30 hover:text-white shrink-0">
                    <svg class="w-3 h-3" 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>
            {{end}}
        </div>
    </details>
    {{end}}

    <!-- Later Section (Collapsed) -->
    {{if .LaterItems}}
    <details class="group">
        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/60 cursor-pointer hover:text-white/80 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none">
            <span>📆</span> {{.LaterLabel}}
            <span class="text-sm font-normal text-white/40">({{len .LaterItems}} items)</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="space-y-2 relative pl-4 border-l border-white/10 ml-2">
            {{range .LaterItems}}
            {{template "timeline-item" .}}
            {{end}}
        </div>
    </details>
    {{end}}

    {{if and (not .TomorrowItems) (not .LaterItems)}}
    <div class="text-center py-8 text-white/50">
        <p>No items found for the selected range.</p>
    </div>
    {{end}}

</div>
{{end}}

{{define "timeline-item"}}
<div class="bg-card bg-card-hover transition-colors rounded-lg border border-white/5 relative {{if .IsCompleted}}opacity-60{{end}}">
    <!-- Time Indicator -->
    <div class="absolute -left-[21px] top-4 w-2.5 h-2.5 rounded-full
        {{if eq .Type "event"}}bg-blue-500{{else if eq .Type "meal"}}bg-orange-500{{else if eq .Type "task"}}bg-green-500{{else if eq .Type "gtask"}}bg-yellow-500{{else}}bg-purple-500{{end}}">
    </div>

    <div class="flex items-start gap-3 p-3">
        <!-- Checkbox for tasks/cards/gtasks -->
        {{if or (eq .Type "task") (eq .Type "card") (eq .Type "gtask")}}
        <input type="checkbox"
               {{if .IsCompleted}}checked{{end}}
               hx-post="{{if .IsCompleted}}/uncomplete-atom{{else}}/complete-atom{{end}}"
               hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"{{if .ListID}}, "listId": "{{.ListID}}"{{end}}}'
               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}}

        {{/* Only show time if it's not midnight (12:00 AM = all-day/no specific time) */}}
        {{if or (ne .Time.Hour 0) (ne .Time.Minute 0)}}
        <div class="flex flex-col items-center min-w-[60px] text-xs text-white/50 pt-0.5">
            <span class="font-medium text-white/80">{{.Time.Format "3:04 PM"}}</span>
            {{if .EndTime}}
                <span class="text-[10px] opacity-70">{{.EndTime.Format "3:04 PM"}}</span>
            {{end}}
        </div>
        {{end}}

        <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 .IsCompleted}}line-through text-white/50{{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 .Description}}
            <p class="text-xs text-white/50 mt-1 line-clamp-2">{{.Description}}</p>
            {{end}}

            {{/* Only show type badge for non-task items, and done badge if completed */}}
            {{if or (ne .Type "task") .IsCompleted}}
            <div class="flex items-center gap-2 mt-2">
                {{if ne .Type "task"}}
                <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/10 text-white/60 uppercase tracking-wider">
                    {{.Type}}
                </span>
                {{end}}
                {{if .IsCompleted}}
                <span class="text-[10px] px-1.5 py-0.5 rounded bg-green-500/20 text-green-400 uppercase tracking-wider">
                    done
                </span>
                {{end}}
            </div>
            {{end}}
        </div>
    </div>
</div>
{{end}}