{{ template "widget-base.html" . }}

{{ define "widget-content" }}
<div class="flex justify-between items-center">
    <div class="color-highlight size-h1">{{ .Calendar.CurrentMonthName }}</div>
    <ul class="list-horizontal-text color-highlight size-h4">
        <li>Week {{ .Calendar.CurrentWeekNumber }}</li>
        <li>{{ .Calendar.CurrentYear }}</li>
    </ul>
</div>

<div class="flex flex-wrap size-h6 margin-top-10 color-subdue">
    <div class="calendar-day">Mo</div>
    <div class="calendar-day">Tu</div>
    <div class="calendar-day">We</div>
    <div class="calendar-day">Th</div>
    <div class="calendar-day">Fr</div>
    <div class="calendar-day">Sa</div>
    <div class="calendar-day">Su</div>
</div>

<div class="flex flex-wrap">
    {{ range .Calendar.Days }}
    <div class="calendar-day{{ if eq . $.Calendar.CurrentDay }} calendar-day-today{{ end }}">{{ . }}</div>
    {{ end }}
</div>
{{ end }}