<div id="campsites-booking">
    <table>
        <colgroup></colgroup>
        {{ range .Months }}
            <colgroup>
                {{ range .Spans }}
                    <col span="{{ .Count }}" class="{{ if .Today}}today {{ end }}{{ if .Weekend }}weekend{{ else }}weekday{{ end }}">
                {{- end }}
            </colgroup>
        {{- end }}
        <thead>
        <tr>
            <th scope="col" rowspan="2">{{( pgettext "Label" "header" )}}</th>
            {{ range .Months }}
                <th scope="col" style="--days: {{ len .Days }}" colspan="{{ len .Days }}">{{ pgettext .Name "month" }} {{ .Year }}</th>
            {{- end }}
        </tr>
        <tr>
            {{ range .Months }}
                {{ range .Days }}
                    <th scope="col">{{ .Day }}</th>
                {{- end }}
            {{- end }}
        </tr>
        </thead>
        <tbody>
        {{ range $campsite := .Campsites -}}
            <tr>
                <th scope="row">
                    {{ template "campsite-heading" . }}
                </th>
                {{ range $.Months }}
                    {{ range $day := .Days }}
                        {{ with index $campsite.Bookings $day -}}
                            <td class="booking-{{ .Status }}">
                                <div class="booking-status"
                                     style="--booking-nights: {{ .Nights }}; --booking-begin: {{ if .Begin }}1{{ else }}0{{ end }}; --booking-end: {{ if .End }}1{{ else }}0{{ end }}"
                                     title="{{ .Holder }}"
                                >{{ .Holder }}</div>
                            </td>
                        {{- else -}}
                            <td></td>
                        {{- end }}
                    {{- end }}
                {{- end }}
            </tr>
        {{- end }}
        </tbody>
    </table>
</div>
