@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/content/pages/index.stx

@@ -0,0 +1,174 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="p-6 min-h-screen text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
+  <div class="flex flex-col gap-6 mx-auto max-w-6xl">
+    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between pb-5 border-b border-neutral-200 dark:border-neutral-800">
+      <div>
+        <p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p>
+        <h1 class="mt-1 font-semibold text-2xl tracking-tight">Pages</h1>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Manage static CMS pages alongside your blog content.</p>
+      </div>
+      <button id="new-page-button" type="button" class="inline-flex gap-2 items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">
+        <span class="h-4 w-4 i-hugeicons-plus-sign"></span>
+        New Page
+      </button>
+    </header>
+
+    <section class="grid gap-4 md:grid-cols-3">
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Total Pages</p>
+        <p id="page-total" class="mt-2 font-semibold text-3xl">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Views</p>
+        <p id="page-views" class="mt-2 font-semibold text-3xl">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Newest</p>
+        <p id="page-newest" class="mt-2 font-semibold text-2xl truncate">-</p>
+      </div>
+    </section>
+
+    <section class="bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+      <div class="p-4 border-b border-neutral-200 dark:border-neutral-800">
+        <input id="page-search" type="search" placeholder="Search pages..." class="px-3 py-2 max-w-md w-full text-sm bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20" />
+      </div>
+      <div class="overflow-x-auto">
+        <table class="min-w-full text-sm divide-neutral-200 divide-y dark:divide-neutral-800">
+          <thead class="font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-900">
+            <tr>
+              <th class="px-4 py-3">Title</th>
+              <th class="px-4 py-3">Template</th>
+              <th class="px-4 py-3">Views</th>
+              <th class="px-4 py-3">Published</th>
+              <th class="px-4 py-3 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody id="pages-table" class="divide-neutral-200 divide-y dark:divide-neutral-800"></tbody>
+        </table>
+      </div>
+      <div id="pages-empty" class="hidden p-10 text-center text-neutral-500 text-sm dark:text-neutral-400">No pages found.</div>
+    </section>
+  </div>
+</div>
+
+<dialog id="page-dialog" class="p-0 max-w-lg w-full text-neutral-950 dark:text-neutral-100 bg-white backdrop:bg-black/40 dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-xl">
+  <form id="page-form" method="dialog">
+    <div class="px-5 py-4 border-b border-neutral-200 dark:border-neutral-800">
+      <h2 class="font-semibold text-lg">New Page</h2>
+    </div>
+    <div class="grid gap-4 p-5">
+      <label class="grid gap-1 font-medium text-sm">Title <input id="page-title" required class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700" /></label>
+      <label class="grid gap-1 font-medium text-sm">Template
+        <select id="page-template" class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700">
+          <option value="default">Default</option>
+          <option value="landing">Landing</option>
+          <option value="blog">Blog</option>
+          <option value="contact">Contact</option>
+        </select>
+      </label>
+    </div>
+    <div class="flex gap-2 justify-end px-5 py-4 border-neutral-200 border-t dark:border-neutral-800">
+      <button id="page-cancel" type="button" class="px-3 py-2 font-medium text-sm border border-neutral-300 rounded-md dark:border-neutral-700">Cancel</button>
+      <button type="submit" class="px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md">Create Page</button>
+    </div>
+  </form>
+</dialog>
+
+<script>
+;(function () {
+  var api = '/api/dashboard/pages'
+  var pages = []
+  var table = document.getElementById('pages-table')
+  var empty = document.getElementById('pages-empty')
+  var dialog = document.getElementById('page-dialog')
+  var search = document.getElementById('page-search')
+  function $(id) { return document.getElementById(id) }
+  // CSRF is default-on for POST/PATCH/DELETE via a stateless double-submit
+  // cookie: the server seeds a non-HttpOnly X-CSRF-Token cookie on safe
+  // responses and the client echoes it back in the header. The list request on
+  // page load seeds it, so the token is present by the time a save can happen.
+  // See defaults/app/Middleware/Csrf.ts.
+  function writeHeaders() {
+    var headers = { 'content-type': 'application/json' }
+    var match = document.cookie.match(/(?:^|;\s*)X-CSRF-Token=([^;]*)/)
+    if (match) headers['X-CSRF-Token'] = decodeURIComponent(match[1])
+    return headers
+  }
+  function escapeHtml(value) {
+    return String(value || '').replace(/[&<>"']/g, function (ch) {
+      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch]
+    })
+  }
+  function fmtDate(value) {
+    if (!value) return '-'
+    var date = new Date(value)
+    return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleDateString()
+  }
+  function render() {
+    var q = search.value.toLowerCase()
+    var rows = pages.filter(function (page) {
+      return !q || [page.title, page.template].join(' ').toLowerCase().indexOf(q) !== -1
+    })
+    $('page-total').textContent = String(pages.length)
+    $('page-views').textContent = pages.reduce(function (sum, p) { return sum + Number(p.views || 0) }, 0).toLocaleString()
+    $('page-newest').textContent = pages[0] ? pages[0].title : '-'
+    empty.classList.toggle('hidden', rows.length > 0)
+    table.innerHTML = rows.map(function (page) {
+      return '<tr class="hover:bg-neutral-50 dark:hover:bg-neutral-950/70">' +
+        '<td class="px-4 py-3 font-medium">' + escapeHtml(page.title) + '</td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + escapeHtml(page.template) + '</td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + Number(page.views || 0).toLocaleString() + '</td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + fmtDate(page.published_at || page.created_at) + '</td>' +
+        '<td class="px-4 py-3 text-right"><button type="button" data-id="' + page.id + '" class="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 rounded"><span class="block h-4 w-4 i-hugeicons-waste"></span></button></td>' +
+      '</tr>'
+    }).join('')
+  }
+  async function load() {
+    var res = await fetch(api)
+    if (!res.ok) throw new Error('Unable to load CMS pages (' + res.status + ').')
+    var json = await res.json()
+    pages = Array.isArray(json.pages) ? json.pages : []
+    render()
+  }
+  document.getElementById('new-page-button').addEventListener('click', function () {
+    $('page-title').value = ''
+    $('page-template').value = 'default'
+    dialog.showModal()
+  })
+  $('page-cancel').addEventListener('click', function () { dialog.close() })
+  document.getElementById('page-form').addEventListener('submit', async function (event) {
+    event.preventDefault()
+    var res = await fetch(api, {
+      method: 'POST',
+      headers: writeHeaders(),
+      body: JSON.stringify({ title: $('page-title').value, template: $('page-template').value }),
+    })
+    if (!res.ok) {
+      var err = await res.json().catch(function () { return {} })
+      return alert(err.message || err.error || 'Could not create page')
+    }
+    dialog.close()
+    await load()
+  })
+  table.addEventListener('click', async function (event) {
+    var button = event.target.closest('button[data-id]')
+    if (!button || !confirm('Delete this page?')) return
+    var res = await fetch(api + '/' + button.getAttribute('data-id'), { method: 'DELETE', headers: writeHeaders() })
+    if (!res.ok) {
+      var err = await res.json().catch(function () { return {} })
+      return alert(err.message || err.error || 'Could not delete page')
+    }
+    await load()
+  })
+  search.addEventListener('input', render)
+
+  load().catch(function (error) {
+    empty.classList.remove('hidden')
+    empty.textContent = error.message || 'Unable to load CMS pages.'
+  })
+})()
+</script>
+
+@endsection

package/views/dashboard/content/posts/index.stx

@@ -0,0 +1,269 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="p-6 min-h-screen text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
+  <div class="flex flex-col gap-6 mx-auto max-w-7xl">
+    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between pb-5 border-b border-neutral-200 dark:border-neutral-800">
+      <div>
+        <p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p>
+        <h1 class="mt-1 font-semibold text-2xl tracking-tight">Posts</h1>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Create, edit, publish, and remove content backed by the Stacks CMS tables.</p>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <a href="/blog" target="_blank" class="inline-flex gap-2 items-center px-3 py-2 font-medium text-sm hover:bg-white dark:hover:bg-neutral-900 border border-neutral-300 rounded-md dark:border-neutral-700">
+          <span class="h-4 w-4 i-hugeicons-view"></span>
+          View Blog
+        </a>
+        <button id="new-post-button" type="button" class="inline-flex gap-2 items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">
+          <span class="h-4 w-4 i-hugeicons-plus-sign"></span>
+          New Post
+        </button>
+      </div>
+    </header>
+
+    <section class="grid gap-4 md:grid-cols-4">
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Total Posts</p>
+        <p id="stat-total" class="mt-2 font-semibold text-3xl">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Published</p>
+        <p id="stat-published" class="mt-2 font-semibold text-3xl text-green-600 dark:text-green-400">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Drafts</p>
+        <p id="stat-drafts" class="mt-2 font-semibold text-3xl text-amber-600 dark:text-amber-400">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Views</p>
+        <p id="stat-views" class="mt-2 font-semibold text-3xl">0</p>
+      </div>
+    </section>
+
+    <section class="bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+      <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between p-4 border-b border-neutral-200 dark:border-neutral-800">
+        <div class="relative flex-1 max-w-md">
+          <span class="absolute left-3 top-1/2 h-4 w-4 text-neutral-400 pointer-events-none -translate-y-1/2 i-hugeicons-search-01"></span>
+          <input id="post-search" type="search" placeholder="Search posts..." class="pl-9 pr-3 py-2 w-full text-sm bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20" />
+        </div>
+        <select id="post-status-filter" class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700">
+          <option value="">All statuses</option>
+          <option value="published">Published</option>
+          <option value="draft">Draft</option>
+          <option value="archived">Archived</option>
+        </select>
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="min-w-full text-sm divide-neutral-200 divide-y dark:divide-neutral-800">
+          <thead class="font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-900">
+            <tr>
+              <th class="px-4 py-3">Title</th>
+              <th class="px-4 py-3">Status</th>
+              <th class="px-4 py-3">Views</th>
+              <th class="px-4 py-3">Published</th>
+              <th class="px-4 py-3 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody id="posts-table" class="divide-neutral-200 divide-y dark:divide-neutral-800"></tbody>
+        </table>
+      </div>
+
+      <div id="posts-empty" class="hidden p-10 text-center">
+        <div class="mx-auto h-10 w-10 text-neutral-400 i-hugeicons-quill-write-02"></div>
+        <h2 class="mt-3 font-semibold text-sm">No posts found</h2>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Create a draft to get the CMS moving.</p>
+      </div>
+    </section>
+  </div>
+</div>
+
+<dialog id="post-dialog" class="p-0 max-w-3xl w-full text-neutral-950 dark:text-neutral-100 bg-white backdrop:bg-black/40 dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-xl">
+  <form id="post-form" method="dialog" class="flex flex-col">
+    <div class="px-5 py-4 border-b border-neutral-200 dark:border-neutral-800">
+      <h2 id="post-dialog-title" class="font-semibold text-lg">New Post</h2>
+      <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Markdown works well here; the public blog reads from the same content field.</p>
+    </div>
+    <div class="grid gap-4 p-5">
+      <input id="post-id" type="hidden" />
+      <label class="grid gap-1 font-medium text-sm">
+        Title
+        <input id="post-title" required class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20" />
+      </label>
+      <label class="grid gap-1 font-medium text-sm">
+        Excerpt
+        <textarea id="post-excerpt" rows="2" class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"></textarea>
+      </label>
+      <div class="grid gap-4 md:grid-cols-2">
+        <label class="grid gap-1 font-medium text-sm">
+          Status
+          <select id="post-status" class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700">
+            <option value="draft">Draft</option>
+            <option value="published">Published</option>
+            <option value="archived">Archived</option>
+          </select>
+        </label>
+        <label class="grid gap-1 font-medium text-sm">
+          Poster URL
+          <input id="post-poster" class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20" />
+        </label>
+      </div>
+      <label class="grid gap-1 font-medium text-sm">
+        Content
+        <textarea id="post-content" rows="12" class="px-3 py-2 font-mono text-sm bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"></textarea>
+      </label>
+    </div>
+    <div class="flex gap-2 justify-end px-5 py-4 border-neutral-200 border-t dark:border-neutral-800">
+      <button id="post-cancel" type="button" class="px-3 py-2 font-medium text-sm hover:bg-neutral-50 dark:hover:bg-neutral-800 border border-neutral-300 rounded-md dark:border-neutral-700">Cancel</button>
+      <button type="submit" class="px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md">Save Post</button>
+    </div>
+  </form>
+</dialog>
+
+<script>
+;(function () {
+  var api = '/api/dashboard/posts'
+  var posts = []
+  var table = document.getElementById('posts-table')
+  var empty = document.getElementById('posts-empty')
+  var dialog = document.getElementById('post-dialog')
+  var form = document.getElementById('post-form')
+  var search = document.getElementById('post-search')
+  var statusFilter = document.getElementById('post-status-filter')
+
+  function $(id) { return document.getElementById(id) }
+  // CSRF is default-on for POST/PATCH/DELETE via a stateless double-submit
+  // cookie: the server seeds a non-HttpOnly X-CSRF-Token cookie on safe
+  // responses and the client echoes it back in the header. The list request on
+  // page load seeds it, so the token is present by the time a save can happen.
+  // See defaults/app/Middleware/Csrf.ts.
+  function writeHeaders() {
+    var headers = { 'content-type': 'application/json' }
+    var match = document.cookie.match(/(?:^|;\s*)X-CSRF-Token=([^;]*)/)
+    if (match) headers['X-CSRF-Token'] = decodeURIComponent(match[1])
+    return headers
+  }
+  function text(value) { return value == null || value === '' ? '-' : String(value) }
+  function statusClass(status) {
+    if (status === 'published') return 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-200'
+    if (status === 'archived') return 'bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
+    return 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200'
+  }
+  function fmtDate(value) {
+    if (!value) return '-'
+    var date = new Date(value)
+    if (Number.isNaN(date.getTime())) return String(value)
+    return date.toLocaleDateString()
+  }
+  function escapeHtml(value) {
+    return String(value || '').replace(/[&<>"']/g, function (ch) {
+      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch]
+    })
+  }
+  function filteredPosts() {
+    var q = (search.value || '').toLowerCase()
+    var s = statusFilter.value
+    return posts.filter(function (post) {
+      var haystack = [post.title, post.excerpt, post.content].join(' ').toLowerCase()
+      return (!q || haystack.indexOf(q) !== -1) && (!s || post.status === s)
+    })
+  }
+  function renderStats() {
+    var published = posts.filter(function (p) { return p.status === 'published' }).length
+    var drafts = posts.filter(function (p) { return p.status === 'draft' }).length
+    var views = posts.reduce(function (sum, p) { return sum + Number(p.views || 0) }, 0)
+    $('stat-total').textContent = String(posts.length)
+    $('stat-published').textContent = String(published)
+    $('stat-drafts').textContent = String(drafts)
+    $('stat-views').textContent = views.toLocaleString()
+  }
+  function render() {
+    renderStats()
+    var rows = filteredPosts()
+    empty.classList.toggle('hidden', rows.length > 0)
+    table.innerHTML = rows.map(function (post) {
+      return '<tr class="hover:bg-neutral-50 dark:hover:bg-neutral-950/70">' +
+        '<td class="px-4 py-3"><div class="font-medium">' + escapeHtml(post.title) + '</div><div class="mt-1 max-w-xl text-neutral-500 text-xs truncate dark:text-neutral-400">' + escapeHtml(post.excerpt || post.content || '') + '</div></td>' +
+        '<td class="px-4 py-3"><span class="inline-flex px-2 py-0.5 font-medium text-xs rounded-full ' + statusClass(post.status) + '">' + escapeHtml(post.status || 'draft') + '</span></td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + Number(post.views || 0).toLocaleString() + '</td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + fmtDate(post.published_at || post.created_at) + '</td>' +
+        '<td class="px-4 py-3"><div class="flex gap-1 justify-end">' +
+        '<button type="button" class="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded" data-action="edit" data-id="' + post.id + '" title="Edit"><span class="block h-4 w-4 i-hugeicons-edit-01"></span></button>' +
+        '<button type="button" class="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 rounded" data-action="delete" data-id="' + post.id + '" title="Delete"><span class="block h-4 w-4 i-hugeicons-waste"></span></button>' +
+        '</div></td>' +
+      '</tr>'
+    }).join('')
+  }
+  async function load() {
+    var res = await fetch(api)
+    if (!res.ok) throw new Error('Unable to load CMS posts (' + res.status + ').')
+    var json = await res.json()
+    posts = Array.isArray(json.posts) ? json.posts : []
+    render()
+  }
+  function openPost(post) {
+    $('post-dialog-title').textContent = post ? 'Edit Post' : 'New Post'
+    $('post-id').value = post ? post.id : ''
+    $('post-title').value = post ? post.title || '' : ''
+    $('post-excerpt').value = post ? post.excerpt || '' : ''
+    $('post-status').value = post ? post.status || 'draft' : 'draft'
+    $('post-poster').value = post ? post.poster || '' : ''
+    $('post-content').value = post ? post.content || '' : ''
+    dialog.showModal()
+  }
+  async function savePost(event) {
+    event.preventDefault()
+    var id = $('post-id').value
+    var payload = {
+      title: $('post-title').value,
+      excerpt: $('post-excerpt').value,
+      status: $('post-status').value,
+      poster: $('post-poster').value,
+      content: $('post-content').value,
+    }
+    var res = await fetch(id ? api + '/' + id : api, {
+      method: id ? 'PATCH' : 'POST',
+      headers: writeHeaders(),
+      body: JSON.stringify(payload),
+    })
+    if (!res.ok) {
+      var err = await res.json().catch(function () { return {} })
+      alert(err.message || err.error || 'Could not save post')
+      return
+    }
+    dialog.close()
+    await load()
+  }
+  async function deletePost(id) {
+    if (!confirm('Delete this post?')) return
+    var res = await fetch(api + '/' + id, { method: 'DELETE', headers: writeHeaders() })
+    if (!res.ok) {
+      alert('Could not delete post')
+      return
+    }
+    await load()
+  }
+
+  document.getElementById('new-post-button').addEventListener('click', function () { openPost(null) })
+  document.getElementById('post-cancel').addEventListener('click', function () { dialog.close() })
+  form.addEventListener('submit', savePost)
+  search.addEventListener('input', render)
+  statusFilter.addEventListener('change', render)
+  table.addEventListener('click', function (event) {
+    var button = event.target.closest('button[data-action]')
+    if (!button) return
+    var id = Number(button.getAttribute('data-id'))
+    if (button.getAttribute('data-action') === 'edit')
+      openPost(posts.find(function (post) { return Number(post.id) === id }))
+    if (button.getAttribute('data-action') === 'delete')
+      deletePost(id)
+  })
+
+  load().catch(function (error) {
+    empty.classList.remove('hidden')
+    empty.querySelector('p').textContent = error.message || 'Unable to load CMS posts.'
+  })
+})()
+</script>
+
+@endsection