{% for start_date, events in grouped_events %}
<div class="calendar-date">
    <div class="calendar-date-date">
        <div class="calendar-date-month">
            {{ start_date.strftime("%b") }}
        </div>
        <div class="calendar-date-day">
            {{ start_date.strftime("%d") }}
        </div>
        <div class="calendar-date-weekday">
            {{ start_date.strftime("%a") }}
        </div>
    </div>
    <div class="calendar-events">
        {% for event in events %}
        <div class="calendar-event" title="{{ event.summary }}{% if event.description %} &mdash; {{ event.description }}{% endif %}">
            <div class="calendar-event-time">
                <div class="calendar-event-starttime">{{ event.start.strftime("%H:%M") }}</div>
                <div class="calendar-event-timesep"></div>
                <div class="calendar-event-endtime">{{ event.end.strftime("%H:%M") }}</div>
            </div>
            <div class="calendar-event-description">
                {% if event.description or event.location %}
                <details class="calendar-event-details">
                    <summary>{{ event.summary | urlize }}</summary>
                    <div class="calendar-popover-content">
                        {% if event.description %}
                        <div class="calendar-popover-entry">
                            {#- description doesn't need an icon, just wastes space #}
                            <div class="calendar-popover-entry-text">{{ event.description | urlize | nl2br }}</div>
                        </div>
                        {% endif %}
                        {% if event.location %}
                        <div class="calendar-popover-entry">
                            <div class="calendar-popover-entry-icon"><i class="fa-solid fa-location-dot"></i></div>
                            <div class="calendar-popover-entry-text">{{ event.location | urlize | nl2br }}</div>
                        </div>
                        {% endif %}
                    </div>
                </details>
                {% else %}
                <span>{{ event.summary }}</span>
                {% endif %}
            </div>

            {%- if "AusbauLab" in event.categories %}
            <div class="calendar-event-type calendar-event-type-ausbau"></div>
            {%- elif event.color %}
            <div class="calendar-event-type" style="background-color: {{ event.color }};"></div>
            {%- else %}
            <div class="calendar-event-type calendar-event-type-unknown"></div>
            {%- endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endfor %}