<% const pg = typeof page !== 'undefined' && page ? page : {}; %>
<% const isEdit = mode === 'edit'; %>
<% const action = isEdit ? '/admin/pages/edit' : '/admin/pages/new'; %>

<form action="<%= action %>" method="post" id="page-form" data-mode="<%= isEdit ? 'edit' : 'create' %>">
  <% if (isEdit) { %>
  <input type="hidden" name="path" value="<%= pg.path || '' %>" />
  <% } %>

  <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
    <div class="xl:col-span-2 space-y-5">
      <div class="card">
        <% if (!isEdit) { %>
        <% const parents = typeof parentOptions !== 'undefined' && Array.isArray(parentOptions) ? parentOptions : []; %>
        <label class="form-label" for="page-parent">Parent folder (optional)</label>
        <select id="page-parent" class="form-input mb-3">
          <option value="">— Root page (e.g. about-us) —</option>
          <% parents.forEach(function(opt) {
            const pad = '\u2003'.repeat(Math.max(0, (opt.depth || 1) - 1));
          %>
          <option value="<%= opt.path %>"<%= (pg.parentPath === opt.path) ? ' selected' : '' %>><%= pad %><%= opt.label %> (/<%= opt.path %>)</option>
          <% }); %>
        </select>
        <label class="form-label" for="page-segment">URL segment *</label>
        <div class="flex items-center gap-2">
          <span class="text-xs font-medium px-3 py-2.5 rounded-l-lg font-mono" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-right:none;color:rgba(255,255,255,.3)" id="page-path-prefix">/</span>
          <input type="text" id="page-segment" class="form-input font-mono" style="border-radius:0 10px 10px 0;text-align:left"
            placeholder="math" dir="ltr" autocomplete="off" />
        </div>
        <input type="hidden" name="path" id="page-path" required value="<%= pg.path || '' %>" />
        <p id="page-path-preview" class="text-xs font-mono mt-2 min-h-[18px]" style="color:#a78bfa;direction:ltr;text-align:left"></p>
        <p class="text-xs mt-1" style="color:rgba(255,255,255,.35)">Letters, numbers, and hyphens only. Example: <code class="text-[11px]">guides</code> or parent <code class="text-[11px]">guides</code> + segment <code class="text-[11px]">math</code></p>
        <% } else { %>
        <label class="form-label">URL path</label>
        <p class="text-sm font-bold font-mono" style="direction:ltr;text-align:left">
          <a href="<%= pg.urlPath || '/' %>" target="_blank" rel="noopener noreferrer" style="color:#a78bfa"><%= pg.urlPath %></a>
        </p>
        <p class="text-xs mt-1" style="color:rgba(255,255,255,.35)">The URL path cannot be changed after creation.</p>
        <% } %>
      </div>

      <div class="card">
        <label class="form-label" for="page-layout-mode">Display mode</label>
        <% const layoutMode = pg.layoutMode || 'site'; %>
        <select name="layoutMode" id="page-layout-mode" class="form-input mb-2">
          <option value="site"<%= layoutMode === 'site' ? ' selected' : '' %>>With site layout (header + footer)</option>
          <option value="standalone"<%= layoutMode === 'standalone' ? ' selected' : '' %>>Standalone (raw HTML/EJS)</option>
        </select>
        <p id="page-layout-hint" class="text-xs" style="color:rgba(255,255,255,.35);line-height:1.65;margin:0">
          <%= layoutMode === 'standalone'
            ? 'Page renders without header/footer. For standalone pages, write the full HTML document (including <!DOCTYPE html>).'
            : 'Page renders inside mainLayout with the site header and footer.' %>
        </p>
      </div>

      <div class="card">
        <label class="form-label" for="page-title">Title (meta)</label>
        <input type="text" name="title" id="page-title" class="form-input" value="<%= pg.title || '' %>" placeholder="Page title for SEO and browser tab" />
        <label class="form-label mt-4" for="page-meta">Meta description</label>
        <textarea name="metaDescription" id="page-meta" class="form-input" style="min-height:80px;resize:vertical" placeholder="Short summary for search engines…"><%= pg.metaDescription || '' %></textarea>
      </div>

      <div class="card">
        <label class="form-label" for="page-content">index.ejs content</label>
        <p id="page-content-hint" class="text-xs mb-3" style="color:rgba(255,255,255,.35)">
          <%= layoutMode === 'standalone'
            ? 'Full page HTML/EJS — no site wrapper.'
            : 'Page EJS/HTML — can be empty. You can use components from Views/public/pages/_components/.' %>
        </p>
        <textarea name="content" id="page-content" class="form-input" rows="18" dir="ltr" style="font-family:Consolas,monospace;font-size:13px;text-align:left;min-height:360px"><%= pg.content || '' %></textarea>
      </div>
    </div>

    <div class="space-y-5">
      <div class="card">
        <p class="text-sm font-semibold text-white mb-3">Sitemap</p>
        <label class="flex items-start gap-3 cursor-pointer">
          <input
            type="checkbox"
            name="excludeFromSitemap"
            value="true"
            class="mt-0.5"
            style="accent-color:#8065f8"
            <%= pg.excludeFromSitemap ? 'checked' : '' %>
          />
          <span>
            <span class="text-sm text-white font-medium block">Exclude from sitemap</span>
            <span class="text-xs block mt-1" style="color:rgba(255,255,255,.4);line-height:1.6">
              New pages are added to the landing sitemap automatically. Check this to omit this page from <code class="text-[11px]">/sitemaps/landing.xml</code>. Deleting a page removes it from the sitemap.
            </span>
          </span>
        </label>
        <% if (!pg.excludeFromSitemap) { %>
        <p class="text-xs mt-3 mb-0" style="color:#6ee7b7">Included in landing sitemap</p>
        <% } else { %>
        <p class="text-xs mt-3 mb-0" style="color:#fcd34d">Excluded from landing sitemap</p>
        <% } %>
      </div>

      <div class="card">
        <p class="text-sm font-semibold text-white mb-3">Help</p>
        <p class="text-xs" style="color:rgba(255,255,255,.45);line-height:1.7;margin:0">
          Files are stored in
          <code class="text-[11px]">Views/public/pages/</code>.
          Each page is a folder with
          <code class="text-[11px]">index.ejs</code>
          and
          <code class="text-[11px]">meta.json</code>.
        </p>
      </div>
      <div class="card space-y-3">
        <button type="submit" class="btn-primary w-full justify-center">Save</button>
        <a href="/admin/pages" class="btn-ghost w-full justify-center">Cancel</a>
        <% if (isEdit && pg.urlPath) { %>
        <a href="<%= pg.urlPath %>" target="_blank" rel="noopener noreferrer" class="btn-ghost w-full justify-center">View on site</a>
        <% } %>
        <% if (isEdit && pg.path) { %>
        <button type="submit" formaction="/admin/pages/delete" formmethod="post" class="btn-danger w-full justify-center page-delete-btn" data-path="<%= pg.path %>">Delete page</button>
        <% } %>
      </div>
    </div>
  </div>
</form>
