{% extends "base.html" %}

{% block title %}Edit Post in {{ group.name }}{% endblock %}

{% block content %}
<h1 class="mb-4">Edit Post in {{ group.name }}</h1>
<form method="POST" id="editGroupPostForm">
    <div class="mb-3">
        <label for="content" class="form-label">Content</label>
        <textarea class="form-control" id="content" name="content" rows="10">{{ post.original_content }}</textarea>
    </div>
    <div class="mb-3">
        <button type="submit" class="btn btn-primary">Update Post</button>
        <a href="{{ url_for('group_detail', vanity_url=group.vanity_url) }}" class="btn btn-secondary">Cancel</a>
    </div>
</form>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script>
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"
    ],
    status: false
});

document.getElementById('editGroupPostForm').addEventListener('submit', function(e) {
    document.getElementById('content').value = easyMDE.value();
});
</script>
{% 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;
    }
    .editor-toolbar button {
        color: #fff !important;
    }
    .editor-toolbar button:hover,
    .editor-toolbar button.active {
        background-color: #555;
    }
    .CodeMirror-cursor {
        border-left: 1px solid #fff;
    }
</style>
{% endblock %}