{% set iconClass="w-3 h-3 flex-none text-dpsgred-700 mr-2" %}

{% for i, event in events %}

    {% partial 'site/components/box'
        image=event.header_image
        image_size='calc(50vw - 2rem)|845:calc(33vw - 1.666rem)|1112:calc(25vw - 1.5rem)|1375:calc(20vw - 1.4rem)|1568:282px'
        header=event.name
        image_rounded=0
        link={'link': '#', 'title': 'Zur Veranstaltung'}
        buttonring=1
        body
    %}
        {% put tagextend %} href="#" @click.prevent="showDetail({{event.id}})" data-backstop-event-box {% endput %}
        <span>
            <span class="flex items-baseline text-sm">
                {{'calendar'|sprite(iconClass)}}
                <span class="text-sm font-semibold text-gray-800"> {{ event.formattedDates }} </span>
            </span>
            {% if event.formattedTimes %}
            <span class="flex items-baseline text-sm">
                {{'clock'|sprite(iconClass)}}
                <span class="text-sm font-semibold text-gray-800"> {{ event.formattedTimes }} </span>
            </span>
            {% endif %}
        </span>
        <span class="flex-grow c text-sm mt-3">{{event.excerpt}}</span>
    {% endpartial %}
{% endfor %}