{% extends "base.html" %}

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

{% block content %}
<section class="section-shell page-top-space">
  <div class="container">
    <div class="dashboard-banner card-surface mb-4">
      <div>
        <span class="eyebrow-pill">Staff workspace</span>
        <h1 class="section-title mt-3 mb-2">Manage your public event calendar securely</h1>
        <p class="section-copy mb-0">Only staff members can reach this area. Create events here or jump into Django Admin for bulk edits.</p>
      </div>
      <div class="dashboard-banner-actions d-flex gap-2 flex-wrap">
        <a class="btn btn-primary-brand" href="{% url 'event_create' %}">Add event</a>
        <a class="btn btn-ghost" href="/admin/">Open admin</a>
      </div>
    </div>

    <div class="table-card card-surface">
      <div class="d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center mb-3">
        <div>
          <h2 class="h4 mb-1">All events</h2>
          <p class="section-copy mb-0">{{ dashboard_count }} scheduled item{{ dashboard_count|pluralize }} currently in the system.</p>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table align-middle mb-0 dashboard-table">
          <thead>
            <tr>
              <th>Event</th>
              <th>Date</th>
              <th>Location</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for event in events %}
            <tr>
              <td>
                <strong>{{ event.name }}</strong><br>
                <small>{{ event.start|date:"g:i A" }} – {{ event.end|date:"g:i A" }}</small>
              </td>
              <td>{{ event.start|date:"M j, Y" }}</td>
              <td>{{ event.location|default:"—" }}</td>
              <td>
                {% if event.is_published %}
                <span class="status-pill status-live">Published</span>
                {% else %}
                <span class="status-pill status-draft">Draft</span>
                {% endif %}
              </td>
              <td>
                <div class="d-flex gap-2 flex-wrap justify-content-end">
                  <a class="btn btn-sm btn-ghost" href="{% url 'event_dashboard_detail' event.slug %}">Review</a>
                  <a class="btn btn-sm btn-ghost" href="{% url 'event_edit' event.slug %}">Edit</a>
                  <a class="btn btn-sm btn-ghost" href="{% url 'event_delete' event.slug %}">Delete</a>
                </div>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="5">
                <div class="empty-state text-center py-5">
                  <h3 class="h5">No events yet</h3>
                  <p class="mb-3">Create your first event to populate the public calendar and widget.</p>
                  <a class="btn btn-primary-brand" href="{% url 'event_create' %}">Create event</a>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
{% endblock %}