bindmanager/templates/editor.html

{% extends "layout.html" %}
{% block content %}
<div class="flex justify-between items-center mb-6 bg-gray-800 p-4 rounded border border-gray-700 shadow">
    <h2 class="text-2xl font-bold">{{ title }}</h2>
    <button onclick="document.getElementById('hid').value=editor.getValue();document.getElementById('frm').submit();" class="bg-blue-600 hover:bg-blue-500 px-8 py-2 rounded font-bold shadow-lg transition">Save Config</button>
</div>
<div class="border border-gray-700 rounded overflow-hidden shadow-2xl relative" style="height: 65vh;"><div id="editor" class="absolute inset-0 text-lg">{{ content }}</div></div>
<form id="frm" action="{{ action }}" method="POST" class="hidden"><textarea name="content" id="hid"></textarea></form>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/perl");
</script>
{% endblock %}