PageEditor.cshtml

@model MyWebApp.Models.Page
@using MyWebApp.Models
@using Microsoft.AspNetCore.Mvc.ViewFeatures
@{
    var sections = ViewBag.Sections as List<PageSection> ?? new List<PageSection>();
    Layout = "../Admin/_AdminLayout";
    var isNew = Model.Id == 0;
    ViewData["Title"] = isNew ? "Create Page" : "Edit Page";
}
<h2>@ViewData["Title"]</h2>
<div class="mode-toggle">
    <button type="button" id="mode-edit" class="mode-btn active">Edit</button>
    <button type="button" id="mode-preview" class="mode-btn">Preview<span id="unsaved-indicator" class="unsaved-indicator">*</span></button>
    <div class="device-buttons">
        <button type="button" class="device-btn active" data-width="100%">Desktop</button>
        <button type="button" class="device-btn" data-width="768px">Tablet</button>
        <button type="button" class="device-btn" data-width="375px">Mobile</button>
    </div>
</div>
<div class="page-editor">
    <aside id="block-library" class="block-library">
        <input type="text" id="block-search" class="search" placeholder="Search blocks..." />
        <div class="block-list"></div>
    </aside>
    <form asp-action="@(isNew ? "Create" : "Edit")" method="post" class="editor-main">
    <input type="hidden" asp-for="Id" />
    <div>
        <div><label>Slug</label><input asp-for="Slug" id="slug-input" /></div>
        <div><label>Title</label><input asp-for="Title" id="title-input" /></div>
        <div>
            <label asp-for="Layout">Layout</label>
            <select asp-for="Layout" id="layout-select">
@if (ViewBag.LayoutZones is IReadOnlyDictionary<string, string[]> layouts)
{
    foreach (var entry in layouts)
    {
            <option value="@entry.Key">@entry.Key</option>
    }
}
            </select>
            <div id="layout-preview" class="layout-preview"></div>
        </div>
        <div><label asp-for="IsPublished"></label><input asp-for="IsPublished" /></div>
        <div><label asp-for="PublishDate"></label><input asp-for="PublishDate" type="datetime-local" /></div>
        <details>
            <summary>Advanced Options</summary>
            <div><label asp-for="MetaDescription" title="SEO description"></label><input asp-for="MetaDescription" /></div>
            <div><label asp-for="MetaKeywords" title="Comma separated keywords"></label><input asp-for="MetaKeywords" /></div>
            <div><label asp-for="OgTitle" title="Social share title"></label><input asp-for="OgTitle" /></div>
            <div><label asp-for="OgDescription" title="Social share description"></label><input asp-for="OgDescription" /></div>
            <div><label asp-for="Category" title="Page category"></label><input asp-for="Category" /></div>
            <div><label asp-for="Tags" title="Comma separated tags"></label><input asp-for="Tags" /></div>
            <div><label asp-for="FeaturedImage" title="URL of featured image"></label><input asp-for="FeaturedImage" /></div>
        </details>
    </div>
    <div class="mt-3" id="sections-container">
@for (int i = 0; i < sections.Count; i++)
{
    var vd = new ViewDataDictionary(ViewData) { ["Index"] = i };
    @await Html.PartialAsync("~/Views/Shared/_SectionEditor.cshtml", sections[i], vd)
}
    </div>
    @if (ViewBag.Templates is List<BlockTemplate> templates && templates.Count > 0)
    {
        <div class="my-2">
            <select id="template-selector">
                <option value="">Insert template...</option>
                @foreach (var t in templates)
                {
                    <option value="@t.Id">@t.Name</option>
                }
            </select>
        </div>
    }
    <button type="button" id="add-section">Add Section</button>
    <div id="section-template" style="display:none">
        @await Html.PartialAsync("~/Views/Shared/_SectionEditor.cshtml", new PageSection(), new ViewDataDictionary(ViewData) { ["Index"] = "__index__" })
    </div>
    <button type="submit">Save</button>
    </form>
    <div id="preview-wrapper" class="preview-wrapper">
        <div id="preview-container" class="preview-container">
            <iframe id="preview-frame"></iframe>
        </div>
    </div>
</div>
@section Scripts {
    <script>
        const layoutZones = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(
            ViewBag.LayoutZones as IReadOnlyDictionary<string, string[]> ??
            new Dictionary<string, string[]>()));
    </script>
    <script src="~/js/page-editor.js" asp-append-version="true"></script>
    <script src="~/js/block-library.js" asp-append-version="true"></script>
    <script>
        const titleInput = document.getElementById('title-input');
        const slugInput = document.getElementById('slug-input');
        function slugify(text) {
            return text.toLowerCase().trim()
                .replace(/[^a-z0-9]+/g, '-')
                .replace(/^-+|-+$/g, '');
        }
        titleInput.addEventListener('input', () => {
            if (!slugInput.value) {
                slugInput.value = slugify(titleInput.value);
            }
        });
    </script>
}