<div class="context-main-bg context-main p-3">
    <legend class="text-center">Edit Blog Post</legend>
    <hr>
    {ADMIN_BREADCRUMBS}
    <form action="" method="post">
        <fieldset>
            <!-- Title -->
            <div class="mb-3 row">
                <label for="title" class="col-lg-3 col-form-label text-end">Title:</label>
                <div class="col-lg-6">
                    <input type="text" class="form-control" name="title" id="title" value="{title}" required>
                </div>
            </div>

            <!-- Slug -->
            <div class="mb-3 row">
                <label for="slug" class="col-lg-3 col-form-label text-end">URL Slug (for pretty linking):</label>
                <div class="col-lg-6">
                    <input type="text" class="form-control" name="slug" id="slug" value="{slug}" required>
                </div>
            </div>

            <!-- form buttons -->
            <div class="mb-3 row">
                <div class="offset-3 col-lg-6">
                        <div class="btn-group w-100">
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="insertTag ('blogPost', 'c');">&#10004;</button>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="insertTag ('blogPost', 'x');">&#10006;</button>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="insertTag ('blogPost', '!');">&#10069;</button>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="insertTag ('blogPost', '?');">&#10068;</button>
                        </div>
                </div>
            </div>

            <!-- Message -->
            <div class="mb-3 row">
                <label for="blogPost" class="col-lg-3 col-form-label text-end">Post:</label>
                <div class="col-lg-6">
                    <textarea class="form-control" name="blogPost" id="blogPost" rows="6" maxlength="2000" required>{content}</textarea>
                    <small class="form-text text-muted">Max: 2000 characters</small>
                </div>
            </div>

            <!-- Hidden Token -->
            <input type="hidden" name="token" value="{TOKEN}">
        </fieldset>

        <!-- Submit Button -->
        <div class="text-center">
            <button name="submit" value="publish" type="submit" class="mx-2 btn btn-lg btn-primary">Publish</button>
            <button name="submit" value="saveDraft" type="submit" class="mx-2 btn btn-lg btn-primary">Save as Draft</button>
            <button name="submit" value="preview" type="submit" class="mx-2 btn btn-lg btn-primary">Preview</button>
        </div>
    </form>
</div>