<div class="container-fluid">
    <div class="row text-center justify-content-center">
        <div class="col">
             <form id="source-text">
            <div id="ckeditor">



            </div>
            </form>
                <script>
                CKEDITOR.ClassicEditor.create(document.getElementById('ckeditor'), {
                toolbar: {
                    items: [
                        'undo', 'redo', '|',
                        'findAndReplace', 'selectAll', '|',
                        'fontSize', 'bold', 'italic', 'strikethrough', 'underline', '|',
                        'link', 'specialCharacters',
                        'horizontalLine',
                    ],
                    shouldNotGroupWhenFull: true
                },
                // Changing the language of the interface requires loading the language file using the <script> tag.
                // language: 'es',
                list: {
                    properties: {
                        styles: true,
                        startIndex: true,
                        reversed: true
                    }
                },
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                    ]
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
                placeholder: 'Welcome to CKEditor 5!',
                // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
                fontFamily: {
                    options: [
                        'default',
                        'Arial, Helvetica, sans-serif',
                        'Courier New, Courier, monospace',
                        'Georgia, serif',
                        'Lucida Sans Unicode, Lucida Grande, sans-serif',
                        'Tahoma, Geneva, sans-serif',
                        'Times New Roman, Times, serif',
                        'Trebuchet MS, Helvetica, sans-serif',
                        'Verdana, Geneva, sans-serif'
                    ],
                    supportAllValues: true
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
                fontSize: {
                    options: [ 10, 12, 14, 'default', 18, 20, 22 ],
                    supportAllValues: true
                },
                // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
                // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
                htmlSupport: {
                    allow: [
                        {
                            name: /.*/,
                            attributes: true,
                            classes: true,
                            styles: true
                        }
                    ]
                },
                // Be careful with enabling previews
                // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
                htmlEmbed: {
                    showPreviews: true
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
                link: {
                    decorators: {
                        addTargetToExternalLinks: true,
                        defaultProtocol: 'https://',
                        toggleDownloadable: {
                            mode: 'manual',
                            label: 'Downloadable',
                            attributes: {
                                download: 'file'
                            }
                        }
                    }
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
                mention: {
                    feeds: [
                        {
                            marker: '@',
                            feed: [
                                '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
                                '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
                                '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
                                '@sugar', '@sweet', '@topping', '@wafer'
                            ],
                            minimumCharacters: 1
                        }
                    ]
                },
                // The "super-build" contains more premium features that require additional configuration, disable them below.
                // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
                removePlugins: [
                    // These two are commercial, but you can try them out without registering to a trial.
                    // 'ExportPdf',
                    // 'ExportWord',
                    'CKBox',
                    'CKFinder',
                    'EasyImage',
                    // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
                    // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
                    // Storing images as Base64 is usually a very bad idea.
                    // Replace it on production website with other solutions:
                    // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
                    // 'Base64UploadAdapter',
                    'RealTimeCollaborativeComments',
                    'RealTimeCollaborativeTrackChanges',
                    'RealTimeCollaborativeRevisionHistory',
                    'PresenceList',
                    'Comments',
                    'TrackChanges',
                    'TrackChangesData',
                    'RevisionHistory',
                    'Pagination',
                    'WProofreader',
                    // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
                    // from a local file system (file://) - load this site via HTTP server if you enable MathType.
                    'MathType',
                    // The following features are part of the Productivity Pack and require additional license.
                    'SlashCommand',
                    'Template',
                    'DocumentOutline',
                    'FormatPainter',
                    'TableOfContents'
                ]
            });
        </script>

        </div>

        <div class="col-md-2">
            <div class="container-fluid">
                <form action="home"><input class="btn btn-secondary" id="new-btn" type="submit" value="New"></form>
                <input class="btn btn-success" id="download-single" type="submit" value="Save">
            </div>
            <br>
            <div class="container-fluid">
                <select class="classic" form="source-text" name="target-lang" id="target-lang">
                    {% for key, value in languages.items() %}
                        {% if key == "ru" %}
                            <option value="{{ key }}" selected>{{ value }}</option>
                        {% else %}
                            <option value="{{ key }}">{{ value }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
                <input class="btn btn-primary" form="source-text" id="translate-btn" type="submit" value="Translate">
            </div>

        </div>

        <div class="col">
            <div id="ckeditor">
                <textarea name="content" id="editor2"></textarea>
            </div>
        </div>
        <script>
                const form = document.getElementById('source-text');
                form.addEventListener('submit', (event) => {
                    event.preventDefault();
                    const textarea = document.getElementById('ckeditor');
                    const data = JSON.parse(textarea.value);
                    const selectElement = document.getElementById("target-lang");
                    const selectedTargetLang = selectElement.value;


                    fetch(`/localization/local-from-json?target_lang=${selectedTargetLang}`, {
                        method: 'POST',
                        body: JSON.stringify(data),
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                    const jsonString = JSON.stringify(data, null, 2);
                    const textArea = document.getElementById('editor2');
                    textArea.value = jsonString;
                    })
                    .catch(error => console.error('Error:', error));
                    });

                    function downloadFile(filename, content) {

                          const element = document.createElement('a');

                          //A blob is a data type that can store binary data
                          // "type" is a MIME type
                          // It can have a different value, based on a file you want to save
                          const blob = new Blob([content], { type: 'plain/text' });

                          //createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
                          const fileUrl = URL.createObjectURL(blob);

                          //setAttribute() Sets the value of an attribute on the specified element.
                          element.setAttribute('href', fileUrl); //file location
                          element.setAttribute('download', filename); // file name
                          element.style.display = 'none';

                          //use appendChild() method to move an element from one element to another
                          document.body.appendChild(element);
                          element.click();

                          //The removeChild() method of the Node interface removes a child node from the DOM and returns the removed node
                          document.body.removeChild(element);
                        };

                        window.onload = () => {
                          document.getElementById('download-single').
                          addEventListener('click', e => {

                            //The value of the file name input box
                            const filename = "translated.arb";

                            //The value of what has been input in the textarea
                            const content = document.getElementById('editor2').value;

                            // The && (logical AND) operator indicates whether both operands are true. If both operands have nonzero values, the result has the value 1 . Otherwise, the result has the value 0.

                            if (filename && content) {
                              downloadFile(filename, content);
                            }
                          });
                        };
        </script>
    </div>
</div> why it doesn't work