{% extends "base.html" %}

{% block title %}Create New Paste{% endblock %}

{% block content %}
<!-- Bootstrap JS -->
<script src="https://cdn.priet.us/cdn/js/bootstrap.bundle.min.js"></script>
<div class="container mt-4">
    <h2>Create New Paste</h2>

    <!-- Toast Container -->
    <div class="toast-container position-fixed top-0 end-0 p-3">
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                {% set bg_class = 'danger' if category == 'error' else 'success' %}
                <div class="toast align-items-center text-white bg-{{ bg_class }} border-0"
                     role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body">
                            {{ message }}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                                aria-label="Close"></button>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
        {% endwith %}
    </div>

    <form method="POST" action="{{ url_for('create_paste_web') }}" enctype="multipart/form-data">
        <!-- Expiración -->
        <div class="mb-3">
            <label for="expire" class="form-label">Expire after 1 day?</label>
            <select class="form-select" id="expire" name="expire">
                <option value="yes" selected>Yes</option>
                <option value="no">No</option>
            </select>
        </div>

        <!-- ✅ Nuevo: Checkbox para privacidad -->
        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" id="private" name="private" value="true">
            <label class="form-check-label" for="private">
                Make paste private (Only you and shared users can view it)
            </label>
        </div>

        <!-- Selección de tipo de paste -->
        <div class="mb-3">
            <label for="type" class="form-label">Paste Type</label>
            <select class="form-select" id="type" name="type" required>
                <option value="Text" selected>Text</option>
                <option value="File">File</option>
            </select>
        </div>

        <!-- Editor de texto (Monaco) -->
        <div class="mb-3" id="text-section">
            <label for="editor" class="form-label">Content</label>
            <div id="editor" style="height: 300px; border: 1px solid #ccc;"></div>
            <input type="hidden" id="content" name="content" />
        </div>

        <!-- Upload de archivo -->
        <div class="mb-3" id="file-section" style="display: none;">
            <label for="file" class="form-label">File</label>
            <input type="file" class="form-control" id="file" name="file">
        </div>

        <!-- Selector de lenguaje -->
        <div class="mb-3">
            <label for="language" class="form-label">Language (Optional)</label>
            <select class="form-select" id="language" name="language">
                <option value="" selected>Select a Language, leave it blank to auto detect</option>
                {% for value, label in pygments_languages %}
                    <option value="{{ value }}">{{ label }}</option>
                {% endfor %}
            </select>
        </div>

        <!-- Botón de submit -->
        <button type="submit" class="btn btn-primary">Create Paste</button>
    </form>
</div>
{% endblock %}

{% block scripts %}
<!-- Incluir Monaco Editor JS -->
<script src="https://cdn.priet.us/monaco-editor/min/vs/loader.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeSelect = document.getElementById('type');
    const languageSelect = document.getElementById('language');
    const textSection = document.getElementById('text-section');
    const fileSection = document.getElementById('file-section');
    const contentInput = document.getElementById('content');
    const editorDiv = document.getElementById('editor');
    
    let editor;

    function getPageTheme() {
        return document.body.getAttribute('data-theme') === 'dark' ? 'vs-dark' : 'vs';
    }

    require.config({ paths: { 'vs': 'https://cdn.priet.us/monaco-editor/min/vs/' }});
    require(['vs/editor/editor.main'], function () {
        editor = monaco.editor.create(editorDiv, {
            value: '',
            language: 'plaintext',
            theme: getPageTheme(),
            automaticLayout: true
        });

        // Manejo del cambio de lenguaje en Monaco Editor
        languageSelect.addEventListener('change', function () {
            const selectedLang = languageSelect.value.toLowerCase();
            monaco.editor.setModelLanguage(editor.getModel(), selectedLang || 'plaintext');
        });
    });

    function toggleSections() {
        const selectedType = typeSelect.value;

        if (selectedType === 'Text') {
            textSection.style.display = 'block';
            fileSection.style.display = 'none';
            contentInput.setAttribute('required', true);
            document.getElementById('file').removeAttribute('required');
        } else {
            textSection.style.display = 'none';
            fileSection.style.display = 'block';
            document.getElementById('file').setAttribute('required', true);
            contentInput.removeAttribute('required');
        }
    }

    function submitContent() {
        if (editor) {
            contentInput.value = editor.getValue();
        }
    }

    toggleSections();
    typeSelect.addEventListener('change', toggleSections);
    document.querySelector('form').addEventListener('submit', submitContent);

    // Detectar cambios en el tema de la página y actualizar el tema del editor
    const observer = new MutationObserver(() => {
        if (editor) {
            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 %}