{% 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") }}
        <div id="editor-container" style="position: relative;">
            {{ form.content(class="form-control", rows=10, id="content", style="position: absolute; top: 0; left: 0; width: 100%; height: 500px; opacity: 0;") }}
            <div id="tinymce-editor" style="width: 100%; height: 500px;"></div>
        </div>
    </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>
    tinymce.init({
        selector: '#tinymce-editor',
        plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
        toolbar_mode: 'floating',
        height: 500,
        setup: function(editor) {
            editor.on('init', function(e) {
                editor.setContent(document.getElementById('content').value);
            });
            editor.on('change', function(e) {
                document.getElementById('content').value = editor.getContent();
            });
        }
    });

    document.getElementById('blogForm').addEventListener('submit', function(e) {
        document.getElementById('content').value = tinymce.get('tinymce-editor').getContent();
    });
</script>
{% endblock %}