89 lines
3.0 KiB
HTML
89 lines
3.0 KiB
HTML
{{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">
|
|
«
|
|
</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">
|
|
»
|
|
</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}}
|