{% extends "base.html" %}

{% block title %}Edit Post{% endblock %}

{% block content %}
<h1 class="mb-4">Edit Post</h1>
<form method="POST" id="editPostForm">
    <div class="mb-3">
        <label for="content" class="form-label">Content</label>
        <textarea class="form-control" id="content" name="content" rows="10"></textarea>
    </div>
    <div class="mb-3">
        <button type="submit" class="btn btn-primary">Update Post</button>
        <button type="submit" name="delete" value="1" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this post?');">Delete Post</button>
    </div>
</form>
{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<style>
    .EasyMDEContainer {
        background-color: #333;
    }
    .EasyMDEContainer .CodeMirror {
        color: #fff;
        background-color: #333;
    }
    .editor-toolbar {
        background-color: #444;
        border-color: #555;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
    }
    .editor-toolbar button {
        color: #fff !important;
        margin: 0 1px;
    }
    .editor-toolbar button:hover,
    .editor-toolbar button.active {
        background-color: #555;
    }
    .CodeMirror-cursor {
        border-left: 1px solid #fff;
    }
    .separator {
        display: none;
    }
</style>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var easyMDE = new EasyMDE({
        element: document.getElementById('content'),
        spellChecker: false,
        autofocus: true,
        lineWrapping: true,
        toolbar: [
            "bold", "italic", "heading", "quote", "unordered-list", "ordered-list",
            "link", "code", "table", "undo", "redo",
            {
                name: "custom-h1",
                action: function(editor){
                    var cm = editor.codemirror;
                    var output = '';
                    var selectedText = cm.getSelection();
                    output = '# ' + selectedText;
                    cm.replaceSelection(output);
                },
                className: "fa fa-header",
                title: "Custom H1",
            },
            {
                name: "custom-h2",
                action: function(editor){
                    var cm = editor.codemirror;
                    var output = '';
                    var selectedText = cm.getSelection();
                    output = '## ' + selectedText;
                    cm.replaceSelection(output);
                },
                className: "fa fa-header",
                title: "Custom H2",
            },
            {
                name: "custom-p",
                action: function(editor){
                    var cm = editor.codemirror;
                    var output = '';
                    var selectedText = cm.getSelection();
                    var color = prompt("Enter color (e.g., red, #ff0000):");
                    if (color) {
                        output = '<p style="color: ' + color + ';">' + selectedText + '</p>';
                        cm.replaceSelection(output);
                    }
                },
                className: "fa fa-paragraph",
                title: "Custom Paragraph",
            }
        ],
        status: false,
        initialValue: {{ post.original_content|tojson|safe }},
        inputStyle: 'textarea'
    });

    // Force mobile keyboard to show up
    easyMDE.codemirror.getInputField().addEventListener('touchstart', function(e) {
        e.target.focus();
    });

    document.getElementById('editPostForm').addEventListener('submit', function(e) {
        document.getElementById('content').value = easyMDE.value();
    });
});
</script>
{% endblock %}