{{define "timeline-tab"}}
<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">

    {{$currentDay := ""}}
    {{range .Items}}
        {{$day := .Time.Format "Monday, January 2"}}
        {{if ne $day $currentDay}}
            {{if ne $currentDay ""}}
                </div> <!-- Close previous day items -->
            </div> <!-- Close previous day container -->
            {{end}}
            {{$currentDay = $day}}
            <div>
                <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2">
                    <span>🗓️</span> {{$day}}
                </h2>
                <div class="space-y-2 relative pl-4 border-l border-white/10 ml-2">
        {{end}}

        <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 relative">
            <!-- 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}}bg-purple-500{{end}}">
            </div>

            <div class="flex items-start gap-3 p-3">
                <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>
                
                <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>
                    
                    {{if .Description}}
                    <p class="text-xs text-white/50 mt-1 line-clamp-2">{{.Description}}</p>
                    {{end}}

                    <div class="flex items-center gap-2 mt-2">
                        <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/10 text-white/60 uppercase tracking-wider">
                            {{.Type}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    {{end}}
    
    {{if ne $currentDay ""}}
        </div> <!-- Close last day items -->
    </div> <!-- Close last day container -->
    {{else}}
        <div class="text-center py-8 text-white/50">
            <p>No items found for the selected range.</p>
        </div>
    {{end}}

</div>
{{end}}