<!doctype html>
<html lang="en">
    <head>
        <?php $title = "Create Article"; include('./partials/title-meta.php'); ?>

        <!-- Quill Plugin CSS -->
        <link href="assets/plugins/quill/quill.core.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/quill/quill.snow.css" rel="stylesheet" type="text/css" />

        <?php include('./partials/head-css.php'); ?>
    </head>

    <body>
        <!-- Begin page -->
        <div class="wrapper">
            <?php include('./partials/topbar.php'); ?> <?php include('./partials/sidenav.php'); ?>

            <!-- ============================================================== -->
            <!-- Start Main Content -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="container-fluid">
                    <?php $subtitle = "Blog"; $title = "Create Article"; include('./partials/page-title.php'); ?>

                    <div class="container-xxl">
                        <div class="row justify-content-center">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header justify-content-between">
                                        <h5 class="mb-0">Create New Blog Post</h5>
                                        <small class="text-muted">Last saved: just now</small>
                                    </div>
                                    <div class="card-body">
                                        <form>
                                            <!-- Post Title -->
                                            <div class="mb-3">
                                                <label for="title" class="form-label fw-semibold">Post Title</label>
                                                <input type="text" class="form-control" id="title" placeholder="Enter your blog title" required />
                                            </div>

                                            <!-- Slug -->
                                            <div class="mb-3">
                                                <label for="slug" class="form-label fw-semibold">Slug</label>
                                                <input type="text" class="form-control" id="slug" placeholder="e.g. how-to-build-a-blog-with-bootstrap" />
                                            </div>

                                            <!-- Author & Publish Date -->
                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <label for="author" class="form-label fw-semibold">Author</label>
                                                    <input type="text" class="form-control" id="author" placeholder="Enter author name" />
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="publishDate" class="form-label fw-semibold">Publish Date & Time</label>
                                                    <input type="text" data-provider="flatpickr" data-date-format="d M, Y" data-enable-time class="form-control flatpickr-input" id="publishDate" />
                                                </div>
                                            </div>

                                            <!-- Category -->
                                            <div class="mb-3 mt-3">
                                                <label for="category" class="form-label fw-semibold">Category</label>
                                                <select id="category" class="form-select">
                                                    <option selected disabled>Select category</option>
                                                    <option>Technology</option>
                                                    <option>Design</option>
                                                    <option>Development</option>
                                                    <option>Business</option>
                                                    <option>Lifestyle</option>
                                                </select>
                                            </div>

                                            <!-- Featured Image -->
                                            <div class="mb-3">
                                                <label for="image" class="form-label fw-semibold">Featured Image</label>
                                                <input class="form-control" type="file" id="image" />
                                                <small class="text-muted">Recommended size: 1200x600px</small>
                                            </div>

                                            <!-- Content -->
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold">Post Content</label>
                                                <div id="snow-editor" style="height: 300px">
                                                    <h3>Create, manage, and publish engaging blog articles effortlessly.</h3>
                                                    <p><br /></p>
                                                    <ul>
                                                        <li>Write and format posts with an intuitive rich-text editor.</li>
                                                        <li>Organize articles by categories, tags, and authors for easy navigation.</li>
                                                        <li>Built-in SEO tools to help your content rank higher on search engines.</li>
                                                        <li>Preview articles before publishing to ensure perfect layout and style.</li>
                                                        <li>Fully responsive design ensures your blog looks great on any device.</li>
                                                    </ul>
                                                    <p><br /></p>
                                                    <p>The Blog Article module helps you create professional-looking posts quickly. Ideal for personal blogs, news platforms, or content-driven websites.</p>
                                                </div>
                                            </div>

                                            <!-- Excerpt -->
                                            <div class="mb-3">
                                                <label for="excerpt" class="form-label fw-semibold">Excerpt (Short Summary)</label>
                                                <textarea class="form-control" id="excerpt" rows="2" placeholder="Enter a short summary for your post..."></textarea>
                                            </div>

                                            <!-- Tags -->
                                            <div class="mb-3">
                                                <label for="tags" class="form-label fw-semibold">Tags</label>
                                                <input type="text" class="form-control" id="tags" placeholder="e.g. bootstrap, web design, ui, frontend" />
                                                <small class="text-muted">Separate tags with commas.</small>
                                            </div>

                                            <!-- SEO Settings -->
                                            <div class="border-top pt-3 mt-4">
                                                <h5 class="fw-bold text-uppercase mb-3 text-muted fs-sm">SEO Settings</h5>
                                                <div class="mb-3">
                                                    <label for="metaTitle" class="form-label">Meta Title</label>
                                                    <input type="text" class="form-control" id="metaTitle" placeholder="Enter SEO title" />
                                                </div>
                                                <div class="mb-3">
                                                    <label for="metaDescription" class="form-label">Meta Description</label>
                                                    <textarea class="form-control" id="metaDescription" rows="2" placeholder="Short description for search engines"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="metaKeywords" class="form-label">Meta Keywords</label>
                                                    <input type="text" class="form-control" id="metaKeywords" placeholder="e.g. blog, bootstrap, tutorial" />
                                                </div>
                                            </div>

                                            <!-- Visibility -->
                                            <div class="border-top pt-3 mt-4">
                                                <h5 class="fw-bold text-uppercase mb-3 text-muted fs-sm">Visibility</h5>
                                                <div class="form-check form-switch mb-2">
                                                    <input class="form-check-input" type="checkbox" id="featured" />
                                                    <label class="form-check-label" for="featured">Mark as Featured Post</label>
                                                </div>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" id="commentsEnabled" checked />
                                                    <label class="form-check-label" for="commentsEnabled">Allow Comments</label>
                                                </div>
                                            </div>

                                            <!-- Status -->
                                            <div class="mt-4 mb-3">
                                                <label class="form-label fw-semibold">Status</label>
                                                <div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="status" id="draft" value="draft" checked />
                                                        <label class="form-check-label" for="draft">Draft</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="status" id="published" value="published" />
                                                        <label class="form-check-label" for="published">Published</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Buttons -->
                                            <div class="d-flex justify-content-center gap-2 mt-3">
                                                <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                                <button type="submit" class="btn btn-success">Save as Draft</button>
                                                <button type="submit" class="btn btn-primary">Publish Post</button>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- end card-body-->
                                </div>
                                <!-- end card-->
                            </div>
                            <!-- end col-->
                        </div>
                        <!-- end row-->
                    </div>
                </div>
                <!-- container-fluid -->

                <?php include('./partials/footer.php'); ?>
            </div>

            <!-- ============================================================== -->
            <!-- End of Main Content -->
            <!-- ============================================================== -->
        </div>
        <!-- END wrapper -->

        <?php include('./partials/customizer.php'); ?> <?php include('./partials/footer-scripts.php'); ?>

        <!-- Quill Editor Js -->
        <script src="assets/plugins/quill/quill.js"></script>

        <!-- Quill Demo Js -->
        <script src="assets/js/pages/form-quilljs.js"></script>
    </body>
</html>
