{% extends "admin_base.html" %}
{% block content %}
<h1>{% if blog %}Edit{% else %}Add{% endif %} Blog Post</h1>
<form method="POST" enctype="multipart/form-data" id="blogForm">
    {{ form.hidden_tag() }}
    <div class="mb-3">
        {{ form.title.label(class="form-label") }}
        {{ form.title(class="form-control") }}
    </div>
    <div class="mb-3">
        {{ form.content.label(class="form-label") }}
        {{ form.content(class="form-control rich-text-editor") }}
    </div>
    <div class="mb-3">
        {{ form.feature_image.label(class="form-label") }}
        {{ form.feature_image(class="form-control") }}
    </div>
    {% for i in range(1, 4) %}
    <div class="mb-3">
        {{ form['gallery_image_' + i|string].label(class="form-label") }}
        {{ form['gallery_image_' + i|string](class="form-control") }}
    </div>
    {% endfor %}
    <div class="mb-3">
        {{ form.meta_description.label(class="form-label") }}
        {{ form.meta_description(class="form-control") }}
    </div>
    <div class="mb-3">
        {{ form.meta_keywords.label(class="form-label") }}
        {{ form.meta_keywords(class="form-control") }}
    </div>
    {{ form.submit(class="btn btn-primary") }}
</form>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        CKEDITOR.replace('content', {
            filebrowserUploadUrl: "{{ url_for('admin_blueprint.upload_file', _external=True) }}",
            filebrowserUploadMethod: 'form'
        });
    });

    document.getElementById('blogForm').addEventListener('submit', function(e) {
        var contentEditor = CKEDITOR.instances.content;
        if (contentEditor) {
            document.getElementById('content').value = contentEditor.getData();
        }
    });
</script>
{% endblock %}