{% extends "base.html" %}

{% block title %}{{ event.name }} | Roadshow Calendar{% endblock %}

{% block content %}
<section class="section-shell page-top-space">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-8">
        <article class="detail-card card-surface">
          <span class="eyebrow-pill">Event detail</span>
          <h1 class="section-title mt-3">{{ event.name }}</h1>
          <div class="detail-meta-grid">
            <div>
              <span>Date</span>
              <strong>{{ event.start|date:"l, F j, Y" }}</strong>
            </div>
            <div>
              <span>Time</span>
              <strong>{{ event.start|date:"g:i A" }} – {{ event.end|date:"g:i A" }}</strong>
            </div>
            <div>
              <span>Location</span>
              <strong>{{ event.location|default:"Location announced soon" }}</strong>
            </div>
          </div>
          <div class="detail-body">
            <p>{{ event.summary|default:"More information about this event will be shared soon." }}</p>
          </div>
          <div class="d-flex flex-wrap gap-2">
            {% if event.event_url %}
            <a class="btn btn-primary-brand" href="{{ event.event_url }}" target="_blank" rel="noopener">Visit event page</a>
            {% endif %}
            <a class="btn btn-ghost" href="{% url 'calendar_page' %}?month={{ event.start|date:'Y-m' }}">Back to calendar month</a>
            <a class="btn btn-ghost" href="{% url 'event_list' %}">Back to event list</a>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>
{% endblock %}