SkyArtShop/Views/AdminPages/Create.cshtml

@model SkyArtShop.Models.Page
@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    ViewData["Title"] = "Create Page";
}

<style>
    .form-check-input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        cursor: pointer !important;
        border: 2px solid #dee2e6 !important;
        border-radius: 4px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-color: white !important;
        background-image: none !important;
        transition: all 0.2s ease !important;
        position: relative !important;
    }
    
    .form-check-input[type="checkbox"]:checked {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
        background-image: none !important;
    }
    
    .form-check-input[type="checkbox"]:checked::after {
        content: '✓' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: white !important;
        font-size: 16px !important;
        font-weight: bold !important;
        line-height: 1 !important;
        display: block !important;
    }
    
    .form-check-input[type="checkbox"]:hover {
        border-color: #28a745 !important;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
    }
</style>

<div class="card">
    <div class="card-body">
        <form method="post">
            <div asp-validation-summary="All" class="text-danger mb-3"></div>
            <div class="mb-3">
                <label class="form-label">Page Name</label>
                <input class="form-control" asp-for="PageName" required />
            </div>
            <div class="mb-3">
                <label class="form-label">Title</label>
                <input class="form-control" asp-for="Title" />
            </div>
            <div class="mb-3">
                <label class="form-label">Subtitle</label>
                <input class="form-control" asp-for="Subtitle" />
            </div>
            <div class="mb-3">
                <label class="form-label">Content</label>
                <textarea class="form-control" asp-for="Content" id="pageContent" rows="15"></textarea>
            </div>
            <div class="form-check mb-3">
                <input asp-for="IsActive" class="form-check-input" type="checkbox" />
                <label class="form-check-label">Active</label>
            </div>
            <button class="btn btn-primary" type="submit">Save Page</button>
            <a class="btn btn-secondary" href="/admin/pages">Cancel</a>
        </form>
    </div>
</div>

@section Scripts {
<script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
    .create(document.querySelector('#pageContent'), {
        toolbar: {
            items: [
                'heading', '|',
                'bold', 'italic', 'underline', 'strikethrough', '|',
                'link', 'blockQuote', '|',
                'bulletedList', 'numberedList', '|',
                'outdent', 'indent', '|',
                'alignment', '|',
                'insertTable', '|',
                'fontSize', 'fontColor', 'fontBackgroundColor', '|',
                'removeFormat', '|',
                'undo', 'redo', '|',
                'sourceEditing'
            ],
            shouldNotGroupWhenFull: true
        },
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }
            ]
        },
        fontSize: {
            options: [
                'small',
                'default',
                'big'
            ]
        },
        table: {
            contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
        },
        htmlSupport: {
            allow: [
                {
                    name: /.*/,
                    attributes: true,
                    classes: true,
                    styles: true
                }
            ]
        }
    })
    .catch(error => {
        console.error(error);
    });
</script>
}