{% extends "admin/blank.twig" %}
{% block content %}
<h1 class="text-2xl font-bold mb-6">Add Content</h1>
{% if error %}
<p class="text-red-600 mb-4">{{ error }}</p>
{% endif %}
<form method="POST" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onsubmit="return validateForm();">
    <div class="mb-4">
        <label class="block text-gray-700 text-sm font-bold mb-2" for="key">Key</label>
    <input name="key" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="key" type="text" placeholder="Key" oninput="validateKey(this)">
    <div id="key-feedback" class="text-sm mt-1"></div>
<script>
function validateKey(el) {
    let feedback = document.getElementById('key-feedback');
    const re = /^[a-z_]+$/;
    if (!el.value) {
        feedback.textContent = 'Key is required.';
        feedback.className = 'text-red-600';
        return false;
    } else if (!re.test(el.value)) {
        feedback.textContent = 'Key must be all lowercase letters and underscores only.';
        feedback.className = 'text-red-600';
        return false;
    } else {
        feedback.textContent = '';
        return true;
    }
}
function validateForm() {
    var keyInput = document.getElementById('key');
    return validateKey(keyInput);
}
</script>
    </div>
    <div class="mb-6">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="value">Content</label>
        <input type="hidden" name="value" id="value-hidden">
        <div id="editor" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline h-40 resize-y bg-white" style="height: 200px;"></div>
        <div id="json-feedback" class="text-sm mt-2"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.3/ace.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>
        var editor = ace.edit("editor");
        editor.session.setMode("ace/mode/json");
        editor.setTheme("ace/theme/github");
        editor.setOptions({
            minLines: 10,
            maxLines: 30,
            autoScrollEditorIntoView: true
        });
        // Sync editor content to hidden input
        function syncEditor() {
            var val = editor.getValue();
            document.getElementById('value-hidden').value = val;
            validateJson(val);
        }
        editor.session.on('change', syncEditor);
        // JSON validation
        function validateJson(val) {
            let feedback = document.getElementById('json-feedback');
            try {
                JSON.parse(val);
                feedback.textContent = 'Valid JSON';
                feedback.className = 'text-green-600';
            } catch (e) {
                feedback.textContent = 'Invalid JSON';
                feedback.className = 'text-red-600';
            }
        }
        // Initial sync
        syncEditor();
        </script>
    </div>
    <div class="flex items-center justify-between">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Create</button>
    </div>
</form>
{% endblock %}