<%- include("partials/layout-top", { title }) %>
<section class="card">
  <%- include("partials/page-header", {
    eyebrow: "Content",
    pageTitle: "Custom pages",
    description: "Publish role-aware HTML or Markdown pages without changing routes."
  }) %>
  <form method="post" action="/admin/pages" class="form-grid" data-page-form>
    <div class="field">
      <label>Slug</label>
      <input name="slug" placeholder="welcome" />
    </div>
    <div class="field">
      <label>Title</label>
      <input name="title" placeholder="Welcome" />
    </div>
    <div class="field">
      <label>Navigation label (optional)</label>
      <input name="nav_label" placeholder="Welcome" />
    </div>
    <div class="field">
      <label>Format</label>
      <select name="format" data-page-format>
        <option value="html" selected>HTML + CSS</option>
        <option value="markdown">Markdown</option>
      </select>
    </div>
    <div class="field">
      <label>Role</label>
      <select name="role">
        <option value="public">Public</option>
        <option value="mod">Moderator</option>
        <option value="admin">Admin</option>
      </select>
    </div>
    <div class="field">
      <label>Show in navigation</label>
      <label class="switch">
        <input type="checkbox" class="switch-input" name="show_in_nav" />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text">Show in nav</span>
      </label>
    </div>
    <div class="field full" data-page-css>
      <label>CSS</label>
      <textarea name="content_css" rows="4" placeholder=".hero { padding: 24px; }"></textarea>
    </div>
    <div class="field full">
      <label data-page-content-label>HTML</label>
      <textarea name="content" rows="6" data-page-content></textarea>
    </div>
    <button type="submit" class="button">Create page</button>
  </form>
  <h2>Existing pages</h2>
  <% if (!pages.length) { %>
  <div class="empty-state">No pages created yet.</div>
  <% } else { %>
  <div class="table-wrap">
  <table class="table">
    <thead>
      <tr>
        <th>Slug</th>
        <th>Title</th>
        <th>Role</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <% pages.forEach((page) => { %>
      <% const pageFormat = (page.format || "html").toString().toLowerCase(); %>
      <tr>
        <td><%= page.slug %></td>
        <td><%= page.title %></td>
        <td><%= page.role %></td>
        <td><%= page.enabled ? "Enabled" : "Disabled" %></td>
        <td>
          <form method="post" action="/admin/pages/<%= page.id %>/toggle" class="inline-form">
            <button type="submit" class="button subtle"><%= page.enabled ? "Disable" : "Enable" %></button>
          </form>
          <form method="post" action="/admin/pages/<%= page.id %>/delete" class="inline-form" data-confirm-mode="modal" data-confirm-title="Delete custom page" data-confirm-text="Delete the custom page '<%= page.title %>'?" data-confirm-label="Delete page">
            <button type="submit" class="button danger">Delete</button>
          </form>
          <button
            type="button"
            class="button subtle"
            data-edit-toggle="page-<%= page.id %>"
            aria-expanded="false"
          >
            Edit
          </button>
        </td>
      </tr>
      <tr class="edit-row" data-edit-row="page-<%= page.id %>">
        <td colspan="5">
          <form method="post" action="/admin/pages/<%= page.id %>/update" class="form-grid" data-page-form>
            <div class="field">
              <label>Slug</label>
              <input name="slug" value="<%= page.slug %>" />
            </div>
            <div class="field">
              <label>Title</label>
              <input name="title" value="<%= page.title %>" />
            </div>
            <div class="field">
              <label>Navigation label</label>
              <input name="nav_label" value="<%= page.nav_label || '' %>" />
            </div>
            <div class="field">
              <label>Format</label>
              <select name="format" data-page-format>
                <option value="html" <%= pageFormat === 'html' ? 'selected' : '' %>>HTML + CSS</option>
                <option value="markdown" <%= pageFormat === 'markdown' ? 'selected' : '' %>>Markdown</option>
              </select>
            </div>
            <div class="field">
              <label>Role</label>
              <select name="role">
                <option value="public" <%= page.role === 'public' ? 'selected' : '' %>>Public</option>
                <option value="mod" <%= page.role === 'mod' ? 'selected' : '' %>>Moderator</option>
                <option value="admin" <%= page.role === 'admin' ? 'selected' : '' %>>Admin</option>
              </select>
            </div>
            <div class="field">
              <label>Show in navigation</label>
              <label class="switch">
                <input
                  type="checkbox"
                  class="switch-input"
                  name="show_in_nav"
                  <%= page.show_in_nav ? 'checked' : '' %>
                />
                <span class="switch-track" aria-hidden="true"></span>
                <span class="switch-text"><%= page.show_in_nav ? 'Visible' : 'Hidden' %></span>
              </label>
            </div>
            <div class="field full" data-page-css>
              <label>CSS</label>
              <textarea name="content_css" rows="4"><%= page.content_css || '' %></textarea>
            </div>
            <div class="field full">
              <label data-page-content-label>HTML</label>
              <textarea name="content" rows="6" data-page-content><%= page.content %></textarea>
            </div>
            <button type="submit" class="button">Save page</button>
          </form>
        </td>
      </tr>
      <% }) %>
    </tbody>
  </table>
  </div>
  <% } %>
</section>
<script>
  const pageForms = document.querySelectorAll("[data-page-form]");
  const updatePageFields = (form) => {
    const format = form.querySelector("[data-page-format]")?.value || "html";
    const cssField = form.querySelector("[data-page-css]");
    const label = form.querySelector("[data-page-content-label]");
    const content = form.querySelector("[data-page-content]");
    const isMarkdown = format === "markdown";
    if (cssField) cssField.style.display = isMarkdown ? "none" : "";
    if (label) label.textContent = isMarkdown ? "Markdown" : "HTML";
    if (content) {
      content.placeholder = isMarkdown ? "# Welcome" : "<h1>Welcome</h1>";
    }
  };
  pageForms.forEach((form) => {
    updatePageFields(form);
    form.querySelector("[data-page-format]")?.addEventListener("change", () => {
      updatePageFields(form);
    });
  });
</script>
<%- include("partials/layout-bottom") %>
