{{ if date ?? location }}
    <div class="flex flex-wrap gap-y-2 gap-x-6 mt-8 font-medium text-base text-primary-900 lg:gap-x-10 lg:text-md">
        {{ if date }}
            <div class="{{ [
                'flex',
                'items-center',
                'gap-x-2',
                'text-primary-500' => collection == 'articles'
            ] | classes | collapse_whitespace }}">
                {{ partial:components/atoms/icons/calendar size="size-6" }}
                <div>{{ date iso_format="dd D MMMM Y" }} {{ if to and { date | format('Y-m-d') != to | format('Y-m-d') } }} {{ trans key="untill" }}<br/> {{ to iso_format="dd D MMMM YYYY" }}{{ /if }}</div>
            </div>
            {{ if collection == 'events' }}
                <div class="flex items-center gap-x-2">
                    {{ partial:components/atoms/icons/clock size="size-6" }}
                    <div>{{ date iso_format="HH:mm" }}{{ if to }} {{ trans key="untill" }} {{ to iso_format="HH:mm" }} {{ /if }}</div>
                </div>
            {{ /if }}
        {{ /if }}
        {{ if location }}
            <div class="flex flex-wrap items-center">
                {{ if location }}
                    <div class="flex items-center gap-x-2">
                        {{ partial:components/atoms/icons/pin size="size-6" }}
                        <div>
                            {{ location }}
                        </div>
                    </div>
                {{ /if }}

                {{ if location_route }}
                    <a href="{{ location_route }}" target="_blank" class="ml-4 font-bold underline underline-offset-2 hover:no-underline">{{ trans key="view route" }}</a>
                {{ /if }}
            </div>
        {{ /if }}
    </div>
{{ /if }}