{% extends 'website/layouts/base.html' %}
{% load static %}

{% block title %}{{ action }} Blog Post - CMS Dashboard{% endblock %}

{% block content %}
<!--====== Start Page Hero Section ======-->
<section class="page-hero bg_cover p-r z-1" data-src="{% static 'assets/images/innerpage/bg/page-bg.jpg' %}" style="background-image: url(&quot;{% static 'assets/images/innerpage/bg/page-bg.jpg' %}&quot;);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <!--=== Page Content ===-->
                <div class="page-content text-center">
                    <h1 class="text-white">{{ action }} Blog Post</h1>
                    <ul class="breadcrumb-nav">
                        <li><a href="{% url 'home' %}">Home</a></li>
                        <li><a href="{% url 'blog_list' %}" class="text-white">/ Blog</a></li>
                        <li class="text-white-50">/ {{ action }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!--====== End Page Hero Section ======-->

<!--====== Start Form Section ======-->
<section class="pt-120 pb-120 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-8">
                <div class="card shadow-sm border-0 rounded-3">
                    <div class="card-header bg-primary text-white p-4">
                        <h4 class="mb-0 text-white"><i class="fas fa-edit me-2"></i>{{ action }} Post Form</h4>
                        <p class="mb-0 text-white-50">Please fill out all the fields below to create or update your blog post.</p>
                    </div>
                    <div class="card-body p-5 bg-white">
                        <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                            {% csrf_token %}
                            
                            <!-- Display Non-Field Errors -->
                            {% if form.non_field_errors %}
                            <div class="alert alert-danger">
                                {{ form.non_field_errors }}
                            </div>
                            {% endif %}

                            <!-- Loop & Render Form Fields -->
                            {% for field in form %}
                            <div class="mb-4">
                                <label for="{{ field.id_for_label }}" class="form-label fw-bold text-dark mb-1">
                                    {{ field.label }}
                                    {% if field.field.required %}<span class="text-danger">*</span>{% endif %}
                                </label>
                                
                                {% if field.name == 'is_featured' %}
                                <div class="form-check form-switch pt-1">
                                    {{ field }}
                                    <label class="form-check-label text-muted ms-2" for="{{ field.id_for_label }}">
                                        {{ field.help_text }}
                                    </label>
                                </div>
                                {% else %}
                                {{ field }}
                                {% if field.help_text %}
                                <div class="form-text text-muted mt-1" style="font-size: 13px;">{{ field.help_text }}</div>
                                {% endif %}
                                {% endif %}

                                {% if field.errors %}
                                <div class="text-danger mt-1 small">
                                    {{ field.errors }}
                                </div>
                                {% endif %}
                            </div>
                            {% endfor %}

                            <!-- Submit & Cancel Buttons -->
                            <div class="d-flex justify-content-between align-items-center mt-5 pt-3 border-top">
                                <a href="{% if post %}{% url 'blog_detail' post.slug %}{% else %}{% url 'blog_list' %}{% endif %}" class="btn btn-outline-secondary px-4 py-2">
                                    <i class="fas fa-times me-1"></i> Cancel
                                </a>
                                <button type="submit" class="btn btn-primary px-5 py-2 fw-bold text-white">
                                    <i class="fas fa-save me-1"></i> Save Blog Post
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--====== End Form Section ======-->
{% endblock %}

{% block extra_js %}
<style>
.ck-editor__editable {
    min-height: 350px;
}
</style>
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#id_content'), {
            toolbar: [
                'heading', '|',
                'bold', 'italic', 'link', '|',
                'bulletedList', 'numberedList', '|',
                'blockQuote', 'insertTable', '|',
                'undo', 'redo'
            ]
        })
        .then(editor => {
            // Keep the underlying Django required textarea updated on every keystroke
            editor.model.document.on('change:data', () => {
                document.querySelector('#id_content').value = editor.getData();
            });
        })
        .catch(error => {
            console.error(error);
        });
</script>
{% endblock %}