{% set weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] %}
<div class="space-y-4 mb-4">
    {% for month in months %}
        {% set totalCols = month.firstDow + (month.days | length) %}
        <div>
            <div class="text-sm font-semibold mb-1">{{ month.label }}</div>
            <div class="overflow-x-auto">
                <div class="w-max">
                    <div class="flex">
                        <div class="w-20 shrink-0"></div>
                        {% for col in 0..(totalCols - 1) %}
                            {% set dow = col % 7 %}
                            <div class="w-6 text-center">
                                <span class="block text-xs leading-none {{ dow >= 5 ? 'text-red-400' : 'text-gray-300' }}">{{ weekdays[dow] }}</span>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="flex mb-0.5">
                        <div class="w-20 shrink-0"></div>
                        {% if month.firstDow > 0 %}
                            {% for i in 1..month.firstDow %}
                                <div class="w-6"></div>
                            {% endfor %}
                        {% endif %}
                        {% for dayNum, day in month.days %}
                            <div class="w-6 text-center">
                                <span class="{{ html_classes('block text-xs leading-none cursor-default', {'font-bold text-secondary': day.isToday, 'text-gray-500': not day.isToday}) }}"
                                    {% if day.tooltip %}{{ stimulus_controller('tooltip', {'content': day.tooltip}) }}{% endif %}
                                >{{ dayNum }}</span>
                            </div>
                        {% endfor %}
                    </div>
                    {% for row in [
                        {label: 'Preis', key: 'hasPrice', color: 'bg-blue-500'},
                        {label: 'Verpfl.', key: 'hasBoard', color: 'bg-green-500'},
                        {label: 'Zusatzl.', key: 'hasAdditional', color: 'bg-amber-500'},
                        {label: 'n. v.', key: 'isBlocked', color: 'bg-red-500'},
                    ] %}
                        <div class="flex items-center mt-0.5">
                            <div class="w-20 shrink-0 text-xs text-gray-500">{{ row.label }}</div>
                            {% if month.firstDow > 0 %}
                                {% for i in 1..month.firstDow %}
                                    <div class="w-6 px-px"><div class="h-3"></div></div>
                                {% endfor %}
                            {% endif %}
                            {% for dayNum, day in month.days %}
                                <div class="w-6 px-px">
                                    <div class="h-3 {{ attribute(day, row.key) ? row.color : 'bg-gray-100' }}"></div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endfor %}
</div>
<div class="flex flex-wrap gap-x-6 gap-y-2 mb-4 text-sm text-gray-600">
    <div class="flex items-center gap-1.5">
        <span class="inline-block w-4 h-3 bg-blue-500"></span> Preiskonfigurationen
    </div>
    <div class="flex items-center gap-1.5">
        <span class="inline-block w-4 h-3 bg-green-500"></span> Verpflegungsleistungen
    </div>
    <div class="flex items-center gap-1.5">
        <span class="inline-block w-4 h-3 bg-amber-500"></span> optionale Zusatzleistungen
    </div>
    <div class="flex items-center gap-1.5">
        <span class="inline-block w-4 h-3 bg-red-500"></span> nicht verfügbar
    </div>
</div>