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

<h3 class="text-primary-700 font-arvo">{{event.name}}</h3>
<div class="time flex items-baseline text-sm">
    {{'calendar' | sprite(iconClass)}}
    <div class="text-sm font-semibold text-gray-800">{{event.formattedDates}}</div>
    <span>{{'clock'|sprite(iconClass ~ ' ml-2')}}</span>
    <div class="text-sm font-semibold text-gray-800">{{event.formattedTimes}}</div>
</div>
<div class="c text-sm mt-3">{{event.content | raw }}</div>
{% if event.can_register %}
<a href="{{event.registration_url}}" {% if event.is_foreign_url %} target="_BLANK"  {% endif %} class="mt-2 md:mt-4 btn btn-primary inline-block btn-shine btn-sm">Zur Anmeldung</a>
{% endif %}
<a class="absolute block mt-3 mr-3 right-0 top-0" href="#" @click.prevent="hideDetail">
    {{'close'|sprite('w-4 h-4 text-gray-700')}}
</a>