@model SkyArtShop.Models.Page
@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    ViewData["Title"] = "Create Page";
}
<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>
}