{% extends "base.html" %}

{% block title %}Delete {{ 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-7">
        <div class="card-surface detail-card">
          <span class="eyebrow-pill">Delete event</span>
          <h1 class="section-title mt-3">Remove {{ event.name }}?</h1>
          <p class="section-copy">This removes the event from the custom dashboard, the public calendar, and the embed widget. This action cannot be undone.</p>

          <div class="detail-meta-grid">
            <div>
              <span>Starts</span>
              <strong>{{ event.start|date:"M j, Y g:i A" }}</strong>
            </div>
            <div>
              <span>Ends</span>
              <strong>{{ event.end|date:"M j, Y g:i A" }}</strong>
            </div>
            <div>
              <span>Location</span>
              <strong>{{ event.location|default:"Location announced soon" }}</strong>
            </div>
          </div>

          <form method="post" class="mt-4">
            {% csrf_token %}
            <div class="d-flex gap-2 flex-wrap">
              <button class="btn btn-primary-brand" type="submit">Yes, delete event</button>
              <a class="btn btn-ghost" href="{% url 'event_dashboard_detail' event.slug %}">Keep event</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}