{{define "timeline.html"}}
<div class="timeline">
    <div class="timeline-header">
        <button 
            hx-get="/timeline/{{.PrevYear}}/{{.PrevMonth}}"
            hx-target="#timeline-panel"
            hx-swap="innerHTML"
            class="nav-btn"
            aria-label="Previous month">
            &#8249;
        </button>
        <h2>{{.MonthName}} {{.Year}}</h2>
        <button 
            hx-get="/timeline/{{.NextYear}}/{{.NextMonth}}"
            hx-target="#timeline-panel"
            hx-swap="innerHTML"
            class="nav-btn"
            aria-label="Next month">
            &#8250;
        </button>
    </div>
    
    <div class="timeline-content">
        {{if .Days}}
        {{range .Days}}
        <article class="timeline-day">
            <header class="timeline-day-header">
                <time datetime="{{formatDate .Date}}">
                    {{.Date.Format "Monday, January 2"}}
                </time>
            </header>
            
            <div class="timeline-entries">
                {{/* Events */}}
                {{range .Events}}
                <div class="timeline-entry event-entry">
                    <div class="entry-icon">📅</div>
                    <div class="entry-content">
                        <h4>{{.Title}}</h4>
                        {{if not .AllDay}}
                        <span class="entry-time">{{formatTime .Start}} - {{formatTime .End}}</span>
                        {{else}}
                        <span class="entry-time">All day</span>
                        {{end}}
                        {{if .Location}}
                        <span class="entry-location">📍 {{.Location}}</span>
                        {{end}}
                        {{if .Description}}
                        <p class="entry-description">{{.Description}}</p>
                        {{end}}
                    </div>
                </div>
                {{end}}
                
                {{/* Diary entry */}}
                {{if .Diary}}
                <div class="timeline-entry diary-entry">
                    <div class="entry-icon">📝</div>
                    <div class="entry-content">
                        <h4>Journal Entry</h4>
                        <p class="entry-description diary-text">{{.Diary.Text}}</p>
                    </div>
                </div>
                {{end}}
                
                {{/* Photos */}}
                {{if .Photos}}
                <div class="timeline-entry photo-entry">
                    <div class="entry-icon">📷</div>
                    <div class="entry-content">
                        <h4>Photos</h4>
                        <div class="photo-grid">
                            {{range .Photos}}
                            <figure class="photo-item">
                                <img src="{{.URLPath}}" alt="{{.Description}}" loading="lazy">
                                <figcaption>{{.Description}}</figcaption>
                            </figure>
                            {{end}}
                        </div>
                    </div>
                </div>
                {{end}}
            </div>
        </article>
        {{end}}
        {{else}}
        <div class="timeline-empty">
            <p>No entries for this month.</p>
        </div>
        {{end}}
    </div>
</div>
{{end}}