{% extends "base.html" %}

{% block title %}Upcoming Events | Roadshow Calendar{% endblock %}

{% block content %}
<section class="section-shell page-top-space">
  <div class="container">
    <div class="section-heading">
      <span class="eyebrow-pill">Public event list</span>
      <h1 class="section-title">All published stops in one clean list</h1>
      <p class="section-copy">Visitors can browse every published event even if they prefer a list over the calendar grid.</p>
    </div>
    <div class="row g-4">
      {% for event in events %}
      <div class="col-lg-4 col-md-6">
        <article class="event-card card-surface h-100">
          <div class="event-date-chip">{{ event.start|date:"M j, Y" }}</div>
          <h2>{{ event.name }}</h2>
          <p class="event-meta">{{ event.start|date:"g:i A" }} – {{ event.end|date:"g:i A" }}</p>
          <p class="event-meta">{{ event.location|default:"Location announced soon" }}</p>
          <p class="event-summary">{{ event.summary|default:"Extra details will be shared here when available."|truncatechars:150 }}</p>
          <div class="mt-auto d-flex gap-2 flex-wrap">
            <a class="btn btn-sm btn-primary-brand" href="{% url 'event_detail' event.slug %}">View details</a>
            {% if event.event_url %}
            <a class="btn btn-sm btn-ghost" href="{{ event.event_url }}" target="_blank" rel="noopener">External event page</a>
            {% endif %}
          </div>
        </article>
      </div>
      {% empty %}
      <div class="col-12">
        <div class="empty-state card-surface text-center">
          <h2>No published events yet</h2>
          <p>Once your team adds and publishes events, visitors will see them here and in the embeddable calendar.</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}