{% extends "base.html" %}
{% block title %}{{ event.title }} · What2Do{% endblock %}
{% block head %}<meta name="description" content="{{ event.title }} at {{ event.venue_name }}"><meta property="og:title" content="{{ event.title }}"><meta property="og:description" content="{{ event.display_date }} at {{ event.display_time }} · {{ event.venue_name }}"><link href="https://unpkg.com/maplibre-gl@5.7.1/dist/maplibre-gl.css" rel="stylesheet">{% endblock %}
{% block content %}
<a href="/" class="back-link">← All events</a>
<article class="event-detail">
  <div>
    <div class="eyebrow">{{ event.display_date }}</div>
    <div class="detail-title">{{ event.title }}</div>
    <div class="detail-time">{{ event.display_time }}{% if event.display_end %} – {{ event.display_end }}{% endif %}</div>
    {% if event.description %}<div class="description">{{ event.description }}</div>{% endif %}
    <div class="detail-card card">
      <div class="detail-field"><div class="detail-label">Venue</div><div class="detail-value">{{ event.venue_name }}</div></div>
      <div class="detail-field"><div class="detail-label">Address</div><div class="detail-value">{{ event.address }}</div></div>
      <div class="detail-field"><div class="detail-label">Source</div><div class="detail-value"><a href="{{ event.event_url }}" target="_blank" rel="noopener">Original event page ↗</a></div></div>
    </div>
    <div class="detail-actions"><button type="button" id="share-button">Share event</button><a class="button secondary" href="{{ event.event_url }}" target="_blank" rel="noopener">Visit source</a></div>
  </div>
  <div>{% if event.latitude is not none %}<div id="event-map" class="detail-map card" data-latitude="{{ event.latitude }}" data-longitude="{{ event.longitude }}" data-title="{{ event.venue_name }}"></div>{% else %}<div class="empty card">No map coordinates are available for this event.</div>{% endif %}</div>
</article>
{% endblock %}
{% block scripts %}<script src="https://unpkg.com/maplibre-gl@5.7.1/dist/maplibre-gl.js"></script><script src="/static/event.js"></script>{% endblock %}