{% extends "base.html" %}

{% block title %}Create Post{% endblock %}

{% block content %}
<h2 class="mb-4">Create a New Post</h2>
<form method="POST" enctype="multipart/form-data" id="postForm">
    <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">
        <label for="image" class="form-label">Image (optional)</label>
        <input type="file" class="form-control" id="image" name="image" accept="image/*">
    </div>
    {% if not current_user.is_authenticated %}
    <div class="mb-3">
        <label for="username" class="form-label">Username (for anonymous posting)</label>
        <input type="text" class="form-control" id="username" name="username" required>
    </div>
    {% endif %}
    <div class="mb-3">
        <button type="submit" class="btn btn-primary">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() {
    function isMobileDevice() {
        return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
    }

    var easyMDE = new EasyMDE({
        element: document.getElementById('content'),
        spellChecker: false,
        autofocus: !isMobileDevice(), // Autofocus only on non-mobile devices
        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: '',
        inputStyle: 'textarea'
    });

    // For mobile devices, add a touch event listener to show the keyboard
    if (isMobileDevice()) {
        easyMDE.codemirror.getWrapperElement().addEventListener('touchstart', function(e) {
            e.stopPropagation();
            easyMDE.codemirror.focus();
        });
    }

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