{% extends "base.html" %}

{% block title %}{{ event.name }} | Staff Review{% 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">
          <div class="d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-start">
            <div>
              <span class="eyebrow-pill">Saved successfully</span>
              <h1 class="section-title mt-3">{{ event.name }}</h1>
            </div>
            {% if event.is_published %}
            <span class="status-pill status-live">Live on the public calendar</span>
            {% else %}
            <span class="status-pill status-draft">Saved as draft</span>
            {% endif %}
          </div>
          <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>
          <div class="detail-body">
            <p>{{ event.summary|default:"No additional staff notes yet." }}</p>
          </div>
          <div class="d-flex gap-2 flex-wrap">
            <a class="btn btn-primary-brand" href="{% url 'event_dashboard' %}">Back to dashboard</a>
            <a class="btn btn-ghost" href="{% url 'event_edit' event.slug %}">Edit in dashboard</a>
            <a class="btn btn-ghost" href="{% url 'event_delete' event.slug %}">Delete event</a>
            <a class="btn btn-ghost" href="/admin/core/event/{{ event.id }}/change/">Open in admin</a>
            <a class="btn btn-ghost" href="{% url 'event_detail' event.slug %}">View public page</a>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>
{% endblock %}