<h1>Blog Posts</h1>
<p style="color:var(--muted);font-size:13px;margin-top:-8px">Published posts are read by the storefront's public blog (docs/SPEC.md §33.9). Unpublished drafts are safe to leave in progress here — they're never exposed publicly.</p>

<% if (forbidden) { %>
  <div class="alert alert-danger">Your role does not have permission to view blog posts.</div>
<% } else { %>
<% if (error) { %><div class="alert alert-danger"><%= error %></div><% } %>

<div class="card">
  <table>
    <thead><tr><th>Title</th><th>Author</th><th>Status</th><th>Published</th><th></th></tr></thead>
    <tbody>
      <% for (const p of posts) { %>
      <tr>
        <td><a href="/marketing/blog/<%= p.id %>/edit"><%= p.title %></a> <span style="color:var(--muted);font-size:11px">/<%= p.slug %></span></td>
        <td><%= p.author %></td>
        <td><span class="badge <%= p.is_published ? 'badge-ok' : 'badge-warn' %>"><%= p.is_published ? 'Published' : 'Draft' %></span></td>
        <td><%= p.published_at ? new Date(p.published_at).toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric' }) : '—' %></td>
        <td>
          <form method="post" action="/marketing/blog/<%= p.id %>/publish-toggle">
            <input type="hidden" name="isPublished" value="<%= p.is_published ? 'false' : 'true' %>">
            <button class="link-btn" type="submit"><%= p.is_published ? 'Unpublish' : 'Publish' %></button>
          </form>
        </td>
      </tr>
      <% } %>
      <% if (!posts.length) { %><tr><td colspan="5" style="color:var(--muted)">No posts yet.</td></tr><% } %>
    </tbody>
  </table>
</div>

<div class="card" style="max-width:760px">
  <h2 style="font-size:15px;margin-top:0">New Post</h2>
  <form method="post" action="/marketing/blog" id="new-post-form">
    <label>Slug (unique, URL-safe — becomes /resources/blog/&lt;slug&gt; on the storefront)</label>
    <input type="text" name="slug" required pattern="[a-z0-9\-]+" title="lowercase letters, numbers, and hyphens only">
    <label>Title</label>
    <input type="text" name="title" required>
    <label>Excerpt (shown on the blog list page)</label>
    <input type="text" name="excerpt" maxlength="500">
    <label>Author</label>
    <input type="text" name="author" value="JurisLink Team">
    <label>Tags (comma-separated)</label>
    <input type="text" name="tags" placeholder="Compliance, Trust Accounting">
    <label>Content</label>
    <textarea name="content" id="new-post-content" rows="12" required></textarea>
    <label><input type="checkbox" name="isPublished" value="true"> Publish immediately</label>
    <button class="btn" type="submit" style="width:100%;margin-top:16px">Create Post</button>
  </form>
</div>

<script src="/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
<script src="/js/ckeditor-helper.js"></script>
<script>
  // Rich text editor for post content — CKEditorField.getData() returns HTML,
  // which is exactly what blog_posts.content stores now (docs/SPEC.md §33.9's
  // revision to a WYSIWYG editor). CKEditor hides the underlying textarea but
  // doesn't keep it in sync, so the submit handler below writes the editor's
  // current HTML back into it immediately before the native form POST fires.
  CkEditorField.mount('new-post-content', { height: 280 });
  document.getElementById('new-post-form').addEventListener('submit', () => {
    document.getElementById('new-post-content').value = CkEditorField.getData('new-post-content');
  });
</script>

<% } %>
