<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Create Article')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Blog', 'title' => 'Create Article')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Blog', 'title' => 'Create Article')) ?>

                    <div class="container">
<div class="card">
<div class="card-header">
<h5 class="card-title">Create New Blog Post</h5>
<small class="text-default-400">Last saved: just now</small>
</div>
<div class="card-body">
<form class="space-y-5">
<!-- Post Title -->
<div>
<label class="form-label" for="title">Post Title</label>
<input class="form-input" id="title" placeholder="Enter your blog title" required="" type="text"/>
</div>
<!-- Slug -->
<div>
<label class="form-label" for="slug">Slug</label>
<input class="form-input" id="slug" placeholder="e.g. how-to-build-a-blog" type="text"/>
</div>
<!-- Author & Publish Date -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-base">
<div>
<label class="form-label" for="author">Author</label>
<input class="form-input" id="author" placeholder="Enter author name" type="text"/>
</div>
<div>
<label class="form-label" for="publishDate">Publish Date &amp; Time</label>
<input class="form-input" data-date-format="d M, Y" data-enable-time="" data-provider="flatpickr" id="publishDate" type="text"/>
</div>
</div>
<!-- Category -->
<div>
<label class="form-label" for="category">Category</label>
<select class="form-select" id="category">
<option disabled="" selected="">Select category</option>
<option>Technology</option>
<option>Design</option>
<option>Development</option>
<option>Business</option>
<option>Lifestyle</option>
</select>
</div>
<!-- Featured Image -->
<div>
<label class="form-label" for="profilephoto">Featured Image</label>
<input class="form-input" id="profilephoto" name="file-input" type="file"/>
<small class="text-default-400">Recommended size: 1200x600px</small>
</div>
<!-- Content -->
<div>
<label class="form-label">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>
<label class="form-label" for="excerpt">Excerpt (Short Summary)</label>
<textarea class="form-textarea" id="excerpt" placeholder="Enter a short summary for your post..." rows="2"></textarea>
</div>
<!-- Tags -->
<div>
<label class="form-label" for="tags">Tags</label>
<input class="form-input" id="tags" placeholder="e.g. TailwindCSS, web design, ui, frontend" type="text"/>
<small class="text-default-400">Separate tags with commas.</small>
</div>
<!-- SEO Settings -->
<div class="border-default-300 mt-7.5 space-y-5 border-t pt-5">
<h5 class="text-default-400 text-sm font-bold uppercase">SEO Settings</h5>
<div>
<label class="form-label" for="metaTitle">Meta Title</label>
<input class="form-input" id="metaTitle" placeholder="Enter SEO title" type="text"/>
</div>
<div>
<label class="form-label" for="metaDescription">Meta Description</label>
<textarea class="form-textarea" id="metaDescription" placeholder="Short description for search engines" rows="2"></textarea>
</div>
<div>
<label class="form-label" for="metaKeywords">Meta Keywords</label>
<input class="form-input" id="metaKeywords" placeholder="e.g. blog, TailwindCSS, tutorial" type="text"/>
</div>
</div>
<!-- Visibility -->
<div class="border-default-300 mt-7.5 space-y-5 border-t pt-5">
<h5 class="text-default-400 text-sm font-bold uppercase">Visibility</h5>
<div class="flex items-center gap-2">
<input class="form-switch" id="featured" type="checkbox"/>
<label class="form-check-label" for="featured">Mark as Featured Post</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-switch" id="commentsEnabled" type="checkbox"/>
<label class="form-check-label" for="commentsEnabled">Allow Comments</label>
</div>
</div>
<!-- Status -->
<div class="mt-7.5 mb-5 space-y-5">
<label class="text-default-400 text-sm font-bold uppercase">Status</label>
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full!" id="draft" name="status" type="radio" value="draft"/>
<label class="form-check-label" for="draft">Draft</label>
</div>
<div class="flex items-center gap-2">
<input class="form-radio rounded-full!" id="published" name="status" type="radio" value="published"/>
<label class="form-check-label" for="published">Published</label>
</div>
</div>
</div>
<!-- Buttons -->
<div class="mt-5 flex flex-wrap justify-center gap-3">
<button class="btn border-secondary hover:bg-secondary text-secondary hover:text-white" type="reset">Reset</button>
<button class="btn bg-success text-white hover:bg-success-hover" type="submit">Save as Draft</button>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="submit">Publish Post</button>
</div>
</form>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

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