<%- include('../partials/header', { title }) %>

<div class="admin-page-head">
  <div>
    <h2>Events</h2>
    <p style="color: var(--ink-300);"><%= events.length %> events</p>
  </div>
  <div style="display:flex; gap:0.5rem;">
    <a href="/admin/events/registrations" class="btn btn-outline btn-sm"><i data-lucide="clipboard-list" width="16" height="16"></i> Registrations</a>
    <a href="/admin/events/new" class="btn btn-primary btn-sm"><i data-lucide="plus" width="16" height="16"></i> Add Event</a>
  </div>
</div>

<div class="table-wrap">
  <table class="data-table">
    <thead><tr><th>Title</th><th>Date</th><th>Location</th><th>Status</th><th></th></tr></thead>
    <tbody>
      <% if (!events.length) { %>
        <tr><td class="empty-row" colspan="5">No events yet. <a href="/admin/events/new">Add your first one</a>.</td></tr>
      <% } %>
      <% events.forEach(function(e) { %>
        <tr>
          <td class="cell-title"><%= e.title %></td>
          <td class="cell-muted"><%= new Date(e.starts_at).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) %></td>
          <td class="cell-muted"><%= e.is_virtual ? 'Virtual' : e.location %></td>
          <td><span class="badge <%= e.status === 'upcoming' ? 'badge-accent' : '' %>"><%= e.status %></span></td>
          <td class="actions">
            <a class="icon-btn" href="/events/<%= e.slug %>" target="_blank" title="View"><i data-lucide="external-link" width="15" height="15"></i></a>
            <a class="icon-btn" href="/admin/events/<%= e.id %>/edit" title="Edit"><i data-lucide="pencil" width="15" height="15"></i></a>
            <form action="/admin/events/<%= e.id %>/delete" method="POST" style="display:inline;" data-confirm="Delete this event?">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
              <button class="icon-btn is-danger" type="submit" title="Delete"><i data-lucide="trash-2" width="15" height="15"></i></button>
            </form>
          </td>
        </tr>
      <% }); %>
    </tbody>
  </table>
</div>

<%- include('../partials/footer') %>
