{{define "timeline.html"}}
<div class="timeline" id="timeline">
    <div class="timeline-header">
        <button 
            hx-get="/timeline/{{.PrevYear}}/{{.PrevMonth}}"
            hx-target="#timeline"
            hx-swap="outerHTML"
            class="tui-button"
            aria-label="Previous month">
            &laquo;
        </button>
        <span class="timeline-title">{{.MonthName}} {{.Year}}</span>
        <button 
            hx-get="/timeline/{{.NextYear}}/{{.NextMonth}}"
            hx-target="#timeline"
            hx-swap="outerHTML"
            class="tui-button"
            aria-label="Next month">
            &raquo;
        </button>
    </div>
    
    <div class="timeline-content">
        {{if .Days}}
        {{range .Days}}
        <article class="timeline-day">
            <div class="tui-window tui-no-shadow">
                <fieldset class="tui-fieldset tui-border-single">
                    <legend>{{.Date.Format "Monday, January 2"}}</legend>
                    
                    <div class="timeline-entries">
                        {{/* Events */}}
                        {{range .Events}}
                        <div class="timeline-entry">
                            <span class="entry-type cyan-255-text">[EVENT]</span>
                            <span class="entry-title white-255-text">{{.Title}}</span>
                            {{if not .AllDay}}
                            <span class="entry-time green-255-text">{{formatTime .Start}} - {{formatTime .End}}</span>
                            {{else}}
                            <span class="entry-time green-255-text">All day</span>
                            {{end}}
                            {{if .Location}}
                            <span class="entry-location yellow-255-text">@ {{.Location}}</span>
                            {{end}}
                            {{if .Description}}
                            <p class="entry-description">{{.Description}}</p>
                            {{end}}
                        </div>
                        {{end}}
                        
                        {{/* Diary entry */}}
                        {{if .Diary}}
                        <div class="timeline-entry">
                            <span class="entry-type purple-255-text">[DIARY]</span>
                            <span class="entry-title white-255-text">Journal Entry</span>
                            <p class="entry-description diary-text">{{.Diary.Text}}</p>
                        </div>
                        {{end}}
                        
                        {{/* Photos */}}
                        {{if .Photos}}
                        <div class="timeline-entry">
                            <span class="entry-type orange-255-text">[PHOTOS]</span>
                            <span class="entry-title white-255-text">{{len .Photos}} photo(s)</span>
                            <div class="photo-grid">
                                {{range .Photos}}
                                <figure class="photo-item">
                                    <a href="{{.URLPath}}" target="_blank">
                                        <img src="{{.URLPath}}" alt="{{.Description}}" loading="lazy">
                                    </a>
                                    {{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
                                </figure>
                                {{end}}
                            </div>
                        </div>
                        {{end}}
                    </div>
                </fieldset>
            </div>
        </article>
        {{end}}
        {{else}}
        <div class="timeline-empty">
            <p class="white-255-text">No entries for this month.</p>
        </div>
        {{end}}
    </div>
</div>
{{end}}