{{define "calendar.html"}}
<div class="calendar">
    <div class="calendar-header">
        <button 
            hx-get="/calendar/{{.PrevYear}}/{{.PrevMonth}}"
            hx-target="#calendar-panel"
            hx-swap="innerHTML"
            class="tui-button"
            aria-label="Previous month">
            &laquo;
        </button>
        <span class="calendar-title">{{.MonthName}} {{.Year}}</span>
        <button 
            hx-get="/calendar/{{.NextYear}}/{{.NextMonth}}"
            hx-target="#calendar-panel"
            hx-swap="innerHTML"
            class="tui-button"
            aria-label="Next month">
            &raquo;
        </button>
    </div>
    
    <div class="calendar-weekdays">
        <span>Mon</span>
        <span>Tue</span>
        <span>Wed</span>
        <span>Thu</span>
        <span>Fri</span>
        <span>Sat</span>
        <span>Sun</span>
    </div>
    
    <div class="calendar-grid">
        {{/* Empty cells before first day */}}
        {{range seq 0 (sub .FirstDayWeekday 1)}}
        <div class="calendar-day empty"></div>
        {{end}}
        
        {{/* Day cells */}}
        {{range $day := seq 1 .DaysInMonth}}
        {{$content := index $.Days $day}}
        <div 
            class="calendar-day{{if isToday $.Year $.Month $day}} today{{end}}{{if $content.HasContent}} has-content{{end}}"
            hx-get="/day/{{$.Year}}/{{$.Month | printf "%d"}}/{{$day}}"
            hx-target="#day-modal-content"
            hx-swap="innerHTML"
            hx-trigger="click"
            data-opens-modal="day-modal">
            <span class="day-number">{{$day}}</span>
            {{if $content.HasContent}}
            <div class="day-indicators">
                {{if $content.HasEvents}}<span class="indicator" title="Events">E</span>{{end}}
                {{if $content.HasDiary}}<span class="indicator" title="Diary">D</span>{{end}}
                {{if $content.HasPhotos}}<span class="indicator" title="Photos">P</span>{{end}}
            </div>
            {{end}}
        </div>
        {{end}}
    </div>
    
    <div class="calendar-actions">
        <button 
            hx-get="/timeline/{{.Year}}/{{.Month | printf "%d"}}"
            hx-target="#timeline-panel"
            hx-swap="innerHTML"
            class="tui-button cyan-168 white-text">
            View Timeline
        </button>
    </div>
</div>

<dialog id="day-modal" class="tui-modal">
    <div class="tui-window tui-no-shadow">
        <fieldset class="tui-fieldset">
            <legend class="center">Day Details</legend>
            <button class="tui-fieldset-button" onclick="document.getElementById('day-modal').close()">
                <span class="red-168-text">X</span>
            </button>
            <div id="day-modal-content">
                <!-- Day content loaded via HTMX -->
            </div>
            <div class="modal-actions">
                <button class="tui-button" onclick="document.getElementById('day-modal').close()">Close</button>
            </div>
        </fieldset>
    </div>
</dialog>
{{end}}