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

<div class="admin-page-head">
  <div>
    <h2>Insights</h2>
    <p style="color: var(--ink-300);"><%= articles.length %> articles</p>
  </div>
  <a href="/admin/articles/new" class="btn btn-primary btn-sm"><i data-lucide="plus" width="16" height="16"></i> New Article</a>
</div>

<div class="table-toolbar">
  <div class="search-box" style="min-width: 280px;">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg>
    <input type="search" placeholder="Filter articles…" data-table-search="#articles-table" />
  </div>
</div>

<div class="table-wrap">
  <table class="data-table" id="articles-table">
    <thead>
      <tr><th>Title</th><th>Category</th><th>Author</th><th>Status</th><th>Published</th><th>Views</th><th></th></tr>
    </thead>
    <tbody>
      <% if (!articles.length) { %>
        <tr><td class="empty-row" colspan="7">No articles yet. <a href="/admin/articles/new">Write your first one</a>.</td></tr>
      <% } %>
      <% articles.forEach(function(a) { %>
        <tr>
          <td class="cell-title"><%= a.title %></td>
          <td class="cell-muted"><%= a.category_name || '—' %></td>
          <td class="cell-muted"><%= a.author_name || '—' %></td>
          <td><span class="badge <%= a.status === 'published' ? 'badge-accent' : '' %>"><%= a.status %></span></td>
          <td class="cell-muted"><%= a.published_at ? new Date(a.published_at).toLocaleDateString('en-US') : '—' %></td>
          <td class="cell-muted"><%= a.view_count %></td>
          <td class="actions">
            <a class="icon-btn" href="/insights/<%= a.slug %>" target="_blank" title="View"><i data-lucide="external-link" width="15" height="15"></i></a>
            <a class="icon-btn" href="/admin/articles/<%= a.id %>/edit" title="Edit"><i data-lucide="pencil" width="15" height="15"></i></a>
            <form action="/admin/articles/<%= a.id %>/delete" method="POST" style="display:inline;" data-confirm="Delete this article?">
              <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') %>
