@model SkyArtShop.Models.PortfolioProject
@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    ViewData["Title"] = "Edit Project";
    var categories = ViewBag.Categories as List<SkyArtShop.Models.PortfolioCategory> ?? new();
}
<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">Title</label>
                <input class="form-control" name="Title" value="@Model.Title" />
            </div>
            <div class="mb-3">
                <label class="form-label">Category</label>
                <select class="form-select" name="CategoryId">
                    @foreach (var c in categories)
                    {
                        <option value="@c.Id" selected="@(Model.CategoryId == c.Id ? "selected" : null)">@c.Name</option>
                    }
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Description</label>
                <textarea class="form-control" id="portfolioDescription" name="Description">@Model.Description</textarea>
            </div>
            <div class="mb-3">
                <label class="form-label">Display Order</label>
                <input type="number" class="form-control" name="DisplayOrder" value="@Model.DisplayOrder" />
            </div>
            <button class="btn btn-primary" type="submit">Save</button>
            <a class="btn btn-secondary" href="/admin/portfolio/projects">Cancel</a>
        </form>
    </div>
</div>

@section Scripts {
<script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/classic/ckeditor.js"></script>
<script>
let portfolioEditor;
ClassicEditor
    .create(document.querySelector('#portfolioDescription'), {
        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 }]
        }
    })
    .then(editor => {
        portfolioEditor = editor;
        document.querySelector('form').addEventListener('submit', function(e) {
            document.querySelector('#portfolioDescription').value = portfolioEditor.getData();
        });
    })
    .catch(error => { console.error(error); });
</script>
}