{% extends "base.html" %}

{% block title %}Edit Paste {{ paste.id }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1>Editar Paste {{ paste.id }}</h1>
    <form method="POST">
        <input type="hidden" id="content" name="content" />
        <div id="editor" style="height: 500px; border: 1px solid #ccc;"></div>
        <button type="submit" class="btn btn-primary mt-3" onclick="submitContent()">Save Changes</button>
        <a href="{{ url_for('get_paste', id=paste.id) }}" class="btn btn-secondary mt-3">Cancelar</a>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.priet.us/monaco-editor/min/vs/loader.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        require.config({ paths: { 'vs': 'https://cdn.priet.us/monaco-editor/min/vs' }});
        require(['vs/editor/editor.main'], function() {
            // Función para obtener el tema de la página
            function getPageTheme() {
                const bodyTheme = document.body.getAttribute('data-theme') || 'light';
                return bodyTheme === 'dark' ? 'vs-dark' : 'vs';
            }

            // Crear el editor Monaco con el tema correcto
            var editor = monaco.editor.create(document.getElementById('editor'), {
                value: {{ current_content|tojson }},
                language: "{{ paste.language|lower if paste.language else 'plaintext' }}",
                theme: getPageTheme(),
                automaticLayout: true
            });

            // Función para enviar contenido al formulario
            window.submitContent = function() {
                document.getElementById('content').value = editor.getValue();
            };

            // Detectar cambios en el tema de la página
            const observer = new MutationObserver(() => {
                monaco.editor.setTheme(getPageTheme());
            });

            observer.observe(document.body, { attributes: true, attributeFilter: ['data-theme'] });
        });
    });
</script>
{% endblock %}
{% block footer %}
  {{ super() }}  <!-- Esto conserva el contenido original del footer definido en base.html -->
{% endblock %}