{% extends 'dashboard/base.html' %}

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

{% block content %}
<div class="container-fluid p-0">

    <!-- Header Actions -->
    <div class="mb-5">
        <a href="{% url 'dashboard_blog_list' %}" class="text-decoration-none text-muted fw-semibold d-inline-flex align-items-center gap-2" style="font-size: 13.5px; transition: color 0.2s ease;">
            <i class="fa-solid fa-arrow-left" style="font-size: 11px;"></i> Back to Blog List
        </a>
        <h4 class="mt-3 mb-1" style="font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--heading-color);">{{ action }} Blog Post</h4>
        <p class="text-muted mb-0" style="font-size: 13.5px;">Modify post elements and configure SEO search rankings</p>
    </div>

    <!-- Form Container -->
    <div class="row">
        <div class="col-12 col-xl-10">
            <div class="card-custom">
                <form method="post" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}
                    
                    {% if form.non_field_errors %}
                    <div class="alert alert-danger border-0 shadow-sm" style="border-radius: 12px;">
                        {{ form.non_field_errors }}
                    </div>
                    {% endif %}

                    <!-- Main Fields -->
                    <h5 class="mb-4 pb-2" style="font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--border-color);">Article Content</h5>
                    
                    <!-- Title -->
                    <div class="mb-4">
                        <label for="{{ form.title.id_for_label }}" class="form-label">
                            Title <span class="text-danger" style="color: var(--danger) !important;">*</span>
                        </label>
                        {{ form.title }}
                        {% if form.title.errors %}
                        <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.title.errors }}</div>
                        {% endif %}
                    </div>

                    <!-- Slug -->
                    <div class="mb-4">
                        <label for="{{ form.slug.id_for_label }}" class="form-label">
                            Slug (URL fragment)
                        </label>
                        {{ form.slug }}
                        <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Leave blank to auto-generate based on the title. E.g. "my-first-post"</div>
                        {% if form.slug.errors %}
                        <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.slug.errors }}</div>
                        {% endif %}
                    </div>

                    <!-- Excerpt -->
                    <div class="mb-4">
                        <label for="{{ form.excerpt.id_for_label }}" class="form-label">
                            Excerpt
                        </label>
                        {{ form.excerpt }}
                        <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Write a short description to display on list pages. Max 500 characters.</div>
                        {% if form.excerpt.errors %}
                        <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.excerpt.errors }}</div>
                        {% endif %}
                    </div>

                    <!-- Content -->
                    <div class="mb-4">
                        <label for="{{ form.content.id_for_label }}" class="form-label">
                            Body Content <span class="text-danger" style="color: var(--danger) !important;">*</span>
                        </label>
                        {{ form.content }}
                        {% if form.content.errors %}
                        <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.content.errors }}</div>
                        {% endif %}
                    </div>

                    <!-- Image & Settings Row -->
                    <div class="row mb-5 pt-3">
                        <div class="col-md-6 mb-4 mb-md-0">
                            <label for="{{ form.featured_image.id_for_label }}" class="form-label">
                                Featured Image
                            </label>
                            {{ form.featured_image }}
                            {% if post and post.featured_image %}
                            <div class="mt-3">
                                <span class="text-muted d-block mb-2" style="font-size: 12px; font-weight: 600; text-transform: uppercase;">Current Image:</span>
                                <img src="{{ post.featured_image.url }}" alt="" class="img-thumbnail bg-transparent" style="max-height: 140px; object-fit: cover; border-color: var(--border-color);">
                            </div>
                            {% endif %}
                            {% if form.featured_image.errors %}
                            <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.featured_image.errors }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="{{ form.status.id_for_label }}" class="form-label">
                                    Publishing Status
                                </label>
                                {{ form.status }}
                            </div>
                            <div class="form-check form-switch pt-2">
                                {{ form.is_featured }}
                                <label class="form-check-label fw-semibold ms-2" for="{{ form.is_featured.id_for_label }}" style="color: var(--text-main); font-size: 14px;">
                                    Feature this post
                                </label>
                                <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Check this to highlight the article on the homepage.</div>
                            </div>
                        </div>
                    </div>

                    <!-- SEO Fields -->
                    <h5 class="mb-4 pb-2" style="font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--border-color);">Search Engine Optimization (SEO)</h5>
                    
                    <div class="mb-4">
                        <label for="{{ form.meta_title.id_for_label }}" class="form-label">
                            Meta Title
                        </label>
                        {{ form.meta_title }}
                        <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Title shown in search results. Falls back to post title if left blank.</div>
                        {% if form.meta_title.errors %}
                        <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.meta_title.errors }}</div>
                        {% endif %}
                    </div>

                    <div class="mb-4">
                        <label for="{{ form.meta_description.id_for_label }}" class="form-label">
                            Meta Description
                        </label>
                        {{ form.meta_description }}
                        <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Short summary shown in search snippets. Max 160 characters.</div>
                        {% if form.meta_description.errors %}
                        <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.meta_description.errors }}</div>
                        {% endif %}
                    </div>

                    <div class="mb-4">
                        <label for="{{ form.meta_keywords.id_for_label }}" class="form-label">
                            Meta Keywords
                        </label>
                        {{ form.meta_keywords }}
                        <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Comma-separated keywords (e.g. SEO, AI Marketing, Google Overviews).</div>
                        {% if form.meta_keywords.errors %}
                        <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.meta_keywords.errors }}</div>
                        {% endif %}
                    </div>

                    <!-- Form Controls Buttons -->
                    <div class="d-flex align-items-center justify-content-between mt-5 pt-4 border-top" style="border-color: var(--border-color) !important;">
                        <a href="{% url 'dashboard_blog_list' %}" class="btn btn-outline-secondary px-4 fw-semibold" style="border-radius: 10px;">Cancel</a>
                        <button type="submit" class="btn btn-primary px-5 fw-semibold py-2.5" style="border-radius: 10px;">
                            <i class="fa-solid fa-save me-2" style="font-size: 14px;"></i> Save Changes
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<style>
.ck-editor__editable {
    min-height: 350px;
    background-color: #ffffff !important;
    color: #334155 !important;
}
.ck.ck-editor__main>.ck-editor__editable {
    background: #ffffff !important;
    border-color: var(--border-color) !important;
}
.ck-reset_all :not(.ck-reset_all-excluded) {
    color: #334155 !important;
}
</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 %}