@model EditBlog

@{
    ViewData["Title"] = "Edit Blog";
}

<link rel="stylesheet" href="/lib/simplemde/simplemde.min.css">

<div class="grid">

    <div>
        @if (Model.Id is null)
        {
            <h2>New Blog</h2>
        }
        else
        {
            <h2>Edit "@Model.Title"</h2>
        }

        <form action="~/blogs/edit/" method="post">
            <input type="hidden" id="id" name="id" value="@Model.Id"/>
            <div>
                <label for="title">Title:</label>
                <input type="text" id="title" name="title" value="@Model.Title" required>
            </div>
            <div>
                <label for="sourceLocation">Source Location:</label>
                <input type="text" id="sourceLocation" name="sourceLocation" value="@Model.SourceLocation" required>
            </div>
            <div>
                <label for="slug">Slug:</label>
                <input type="text" id="slug" name="slug" value="@Model.Slug">
            </div>
            <div>
                <input type="checkbox" id="showDetails" name="showDetailsStr" @(Model.ShowDetails ? "checked" : "")>
                <label for="showDetails">Show Details</label>
            </div>
            <div>
                <label for="imageUrl">Image URL:</label>
                <input type="text" id="imageUrl" name="imageUrl" value="@Model.ImageUrl">
            </div>
            <div>
                <label for="createdAt">Created At:</label>
                <input type="datetime-local" id="createdAt" name="createdAt"
                       value="@Model.CreatedAt.ToString("yyyy-MM-ddTHH:mm")" required>
            </div>
            <div>
                <label for="modifiedAt">Modified At:</label>
                <input type="datetime-local" id="modifiedAt" name="modifiedAt"
                       value="@Model.ModifiedAt.ToString("yyyy-MM-ddTHH:mm")" required>
            </div>
            <div>
                <label for="signature">Signature:</label>
                <input type="text" id="signature" name="signature" value="@Model.Signature">
            </div>
            <div>
                <input type="checkbox" id="fullWidth" name="fullWidthStr" @(Model.FullWidth ? "checked" : "")>
                <label for="visible">FullWidth</label>
            </div>
            <div>
                <input type="checkbox" id="visible" name="visibleStr" @(Model.Visible ? "checked" : "")>
                <label for="visible">Visible</label>
            </div>
            <br/>
            <div>
                <label for="text">Text:</label>
                <textarea style="field-sizing: content" id="text" name="text" required>@Model.Text</textarea>
            </div>
            <div class="grid">
                <div>
                    <button type="submit">
                        @if (Model.Id is null)
                        {
                            <span>Create</span>
                        }
                        else
                        {
                            <span>Update</span>
                        }
                    </button>
                </div>
                <div>
                    <button class="secondary btn-fw" hx-post="/blogs/preview" hx-target="#preview" hx-swap="OuterHTML">
                        Preview
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div id="preview">

    </div>
</div>

<style>
    .CodeMirror {
        background: var(--pico-form-element-background-color);
        border-color: var(--pico-form-element-border-color);
        color: var(--pico-form-element-color);
        border-radius: var(--pico-border-radius);
    }

    .CodeMirror .CodeMirror-selected {
        background: var(--pico-text-selection-color);
    }

    .CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
        background: var(--pico-text-selection-color);
    }
    
    .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
        background: var(--pico-text-selection-color);
    }

    .CodeMirror-cursor {
        border-color: white;
    }

    .CodeMirror:active {
        background: var(--pico-form-element-active-background-color);
        border-color: var(--pico-form-element-active-border-color);
    }
</style>

<script src="/lib/simplemde/simplemde.min.js"></script>

<script>
    let simplemde = new SimpleMDE({
        element: document.getElementById("text"),
        toolbar: false,
        forceSync: true,
        renderingConfig: {
            codeSyntaxHighlighting: false,
        },
        spellChecker: false,
        styleSelectedText: false
    });
</script>