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

<div class="admin-page-head">
  <div>
    <h2>Newsletter Subscribers</h2>
    <p style="color: var(--ink-300);"><%= subscribers.length %> total</p>
  </div>
  <a href="/admin/newsletter/export.csv" class="btn btn-outline btn-sm"><i data-lucide="download" width="16" height="16"></i> Export CSV</a>
</div>

<div class="table-wrap">
  <table class="data-table">
    <thead><tr><th>Email</th><th>Source</th><th>Status</th><th>Subscribed</th></tr></thead>
    <tbody>
      <% if (!subscribers.length) { %>
        <tr><td class="empty-row" colspan="4">No subscribers yet.</td></tr>
      <% } %>
      <% subscribers.forEach(function(s) { %>
        <tr>
          <td class="cell-title"><%= s.email %></td>
          <td class="cell-muted"><%= s.source || '—' %></td>
          <td>
            <form action="/admin/newsletter/<%= s.id %>/status" method="POST" data-status-form>
              <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
              <select name="status" class="status-select">
                <option value="active" <%= s.status === 'active' ? 'selected' : '' %>>Active</option>
                <option value="unsubscribed" <%= s.status === 'unsubscribed' ? 'selected' : '' %>>Unsubscribed</option>
              </select>
            </form>
          </td>
          <td class="cell-muted"><%= new Date(s.created_at).toLocaleDateString('en-US') %></td>
        </tr>
      <% }); %>
    </tbody>
  </table>
</div>

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