{% set category = event.categoryNames|first %}
{% set image = event.primaryImage %}
<a class="event-card" href="{{ path('event_show', {id: event.id}) }}">
  {% if image %}
    <div class="glyph-tile" style="padding:0;">
      <img src="{{ image.storagePath }}" alt="" loading="lazy" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover;">
    </div>
  {% else %}
    <div class="glyph-tile" style="background:{{ category|category_bg }}; color:{{ category|category_color }};">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18"/></svg>
    </div>
  {% endif %}
  <div class="body">
    {% if category %}
      <span class="tag" style="background:{{ category|category_bg }}; color:{{ category|category_color }};">{{ category }}</span>
    {% endif %}
    <h3>{{ event.title }}</h3>
    <p class="when">{{ event.startDateTime ? event.startDateTime|date('D, M j · H:i') : 'Date TBD' }}</p>
    <p class="place">
      {{ [event.street, event.city]|filter(v => v)|join(', ') ?: event.country }}
      {% if dist is defined and dist is not null %}
        · {{ dist < 1 ? (dist * 1000)|round ~ ' m' : (dist < 10 ? dist|round(1) : dist|round) ~ ' km' }} away
      {% endif %}
    </p>
  </div>
</a>