AudioCore/modules/pages/views/admin/edit.php

<?php
$pageTitle = $title ?? 'Edit Page';
$page = $page ?? [];
$error = $error ?? '';
ob_start();
?>
<section class="admin-card">
  <div class="badge">Pages</div>
  <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px;">
    <div>
      <h1 style="font-size:28px; margin:0;"><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?></h1>
      <p style="color: var(--muted); margin-top:6px;">Create a custom page for the site.</p>
    </div>
    <a href="/admin/pages" class="btn outline">Back</a>
  </div>

  <?php if ($error): ?>
    <div style="margin-top:16px; color:#f3b0b0; font-size:13px;"><?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?></div>
  <?php endif; ?>

  <form method="post" action="/admin/pages/save" style="margin-top:18px; display:grid; gap:16px;">
    <input type="hidden" name="id" value="<?= (int)($page['id'] ?? 0) ?>">
    <div class="admin-card" style="padding:16px;">
      <div style="display:grid; gap:12px;">
        <label class="label">Title</label>
        <input class="input" name="title" value="<?= htmlspecialchars((string)($page['title'] ?? ''), ENT_QUOTES, 'UTF-8') ?>" placeholder="About">
        <label class="label">Slug</label>
        <input class="input" name="slug" value="<?= htmlspecialchars((string)($page['slug'] ?? ''), ENT_QUOTES, 'UTF-8') ?>" placeholder="about">
        <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
          <label class="label" style="margin:0;">Content (HTML)</label>
          <button type="button" class="btn outline small" data-media-picker="content_html">Insert Media</button>
        </div>
        <textarea class="input" name="content_html" id="content_html" rows="18" style="resize:vertical; font-family:'IBM Plex Mono', monospace; font-size:13px; line-height:1.6;"></textarea>
        <label style="display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.2em;">
          <input type="checkbox" name="is_published" value="1" <?= ((int)($page['is_published'] ?? 0) === 1) ? 'checked' : '' ?>>
          Published
        </label>
        <label style="display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.2em;">
          <input type="checkbox" name="is_home" value="1" <?= ((int)($page['is_home'] ?? 0) === 1) ? 'checked' : '' ?>>
          Set as Home Page
        </label>
        <label style="display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.2em;">
          <input type="checkbox" name="is_blog_index" value="1" <?= ((int)($page['is_blog_index'] ?? 0) === 1) ? 'checked' : '' ?>>
          Set as Blog Page
        </label>
      </div>
    </div>

    <div style="display:flex; justify-content:flex-end; gap:12px; align-items:center;">
      <button type="button" id="previewPage" class="btn outline">Preview</button>
      <button type="submit" class="btn">Save page</button>
    </div>
  </form>

  <?php if (!empty($page['id'])): ?>
    <form method="post" action="/admin/pages/delete" onsubmit="return confirm('Delete this page?');" style="margin-top:12px;">
      <input type="hidden" name="id" value="<?= (int)($page['id'] ?? 0) ?>">
      <button type="submit" class="btn outline">Delete</button>
    </form>
  <?php endif; ?>
</section>
<script>
  (function () {
    const inputEl = document.getElementById('content_html');
    const previewBtn = document.getElementById('previewPage');
    if (!inputEl || !previewBtn) {
      return;
    }

    const rawHtml = <?=
      json_encode((string)($page['content_html'] ?? ''), JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT)
    ?>;
    inputEl.value = rawHtml || '';

    previewBtn.addEventListener('click', function () {
      const previewWindow = window.open('', 'pagePreview', 'width=1200,height=800');
      if (!previewWindow) {
        return;
      }
      const html = inputEl.value || '';
      const doc = previewWindow.document;
      doc.open();
      doc.write(`<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Preview</title>
  <style>
    body {
      margin: 0;
      font-family: 'Syne', sans-serif;
      background-color: #14151a;
      color: #f5f7ff;
    }
    .shell { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }
    .card {
      border-radius: 24px;
      background: rgba(20, 22, 28, 0.75);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 20px 50px rgba(0,0,0,0.3);
      padding: 28px;
    }
    a { color: #9ad4ff; }
  </style>
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
  <main class="shell">
    <section class="card">
      ${html}
    </section>
  </main>
</body>
</html>`);
      doc.close();
    });
  })();
</script>
<?php
$content = ob_get_clean();
require __DIR__ . '/../../../admin/views/layout.php';