<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}Technical Report Generator{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- This block will render the necessary JS/CSS for form widgets like TinyMCE -->
    {% block form_media %}
        {{ form.media }}
    {% endblock %}
    {% block tinymce_config %}
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        if (typeof tinymce === 'undefined') return;

        setTimeout(function () {
            var editorConfigs = [];
            tinymce.editors.forEach(function (editor) {
                editorConfigs.push({ id: editor.id });
            });

            tinymce.remove();

            editorConfigs.forEach(function (config) {
                tinymce.init({
                    selector: '#' + config.id,
                    height: 320,
                    width: '100%',
                    menubar: 'file edit view insert format tools table help',
                    plugins: [
                        'advlist autolink lists link image charmap print preview anchor',
                        'searchreplace visualblocks code fullscreen',
                        'insertdatetime media table paste code help wordcount'
                    ],
                    toolbar: 'undo redo | bold italic underline strikethrough | ' +
                        'fontselect fontsizeselect formatselect | ' +
                        'alignleft aligncenter alignright alignjustify | ' +
                        'outdent indent | numlist bullist | ' +
                        'forecolor backcolor removeformat | ' +
                        'pagebreak | charmap emoticons | ' +
                        'fullscreen preview print | ' +
                        'image media link anchor | ltr rtl',
                    custom_undo_redo_levels: 10,
                    relative_urls: false,
                    remove_script_host: true,
                    images_upload_url: '/tinymce/upload/',
                    file_picker_types: 'image',

                    file_picker_callback: function (callback, value, meta) {
                        // Store the callback so the popup can use it
                        window.tinymceFilePickerCallback = callback;

                        var browserUrl = '/admin/filebrowser/browse/?' +
                            'pop=3&type=image&dir=uploads/';

                        window.open(
                            browserUrl,
                            'filebrowser',
                            'width=960,height=600,resizable=yes,scrollbars=yes'
                        );
                    }
                });
            });
        }, 300);
    });

    /**
    * This function is called by django-filebrowser when a file is selected.
    * Filebrowser looks for this exact function name on the opener window.
    */
    function FileBrowserDialogue() {}
    FileBrowserDialogue.submit = function (selectedUrl) {
        if (window.tinymceFilePickerCallback) {
            window.tinymceFilePickerCallback(selectedUrl);
            window.tinymceFilePickerCallback = null;
        }
    };
    </script>
    {% endblock %}
</head>
<body>
    <div class="container mt-4">
        <h1 class="mb-4"><a href="{% url 'document_list' %}" class="text-dark text-decoration-none">Document Generator</a></h1>
        {% block content %}{% endblock %}
    </div>
</body>
</html>
