

<div class="container-fluid">

    <div class="row " >
        
        <div class="col text-truncate">
            <h2>
                <i class="bi bi-filetype-md"></i> {{ file_name }}
            </h2>
        </div>
        <div class="col text-end">
            <h2>
                <a href="javascript:void(0)" id="change_view_button" title="Switch view mode" class="href icon-link">
                    <i class="bi bi-toggle-off"></i>
                    View
                </a>
                
            </h2>
        </div>
        <div class="col text-end">
            <h2>
                
                <a href="javascript:void(0)" id="save_button" title="Save file"><i class="bi bi-floppy"></i></a>
                &nbsp;&nbsp;
                <a href="javascript:void(0)" id="cancel_button" title="Cancel"><i class="bi bi-x-circle"></i></a>
            </h2>
        </div>
        
        
    </div>
    
    <div class="row " >
        <div id="editor1"></div>
    </div>

</div>



<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />

<script>
    
    

if (typeof window.$$ != 'function') {
    window.$$ = (arg0, arg1) => {
        if (arg0 && arg1) {
            return arg0.querySelectorAll(arg1);
        }

        if (arg0 && !arg1) {
            return document.querySelectorAll(arg0);
        }
    };
}

if (typeof window.$ != 'function') {
    window.$ = (arg0, arg1) => {
        if (arg0 && arg1) {
            return arg0.querySelector(arg1);
        }

        if (arg0 && !arg1) {
            return document.querySelector(arg0);
        }
    };
}


// --------------------------------------------------------------------------------------------------------------------------------------
    
    
    
    (() => {
        
        let decodeHtmlEntities = (str) => { 
            const textarea = document.createElement('textarea'); 
            textarea.innerHTML = str; 
            return textarea.value; 
        };
        
        let val = decodeHtmlEntities(`{{ file_data }}`);
        
        const editor = new toastui.Editor({
            el: document.querySelector('#editor1'),
            height: '900px',
            initialEditType: 'markdown',
            previewStyle: 'tab',
            initialValue: val,
            usageStatistics: false,
        });

        editor.getMarkdown();
        
        
        
        
        let full_path = `{{full_path}}`;
        
        
        
        
        
        const save_button = $('#save_button');
        if (save_button) {
            save_button.addEventListener('click', (ev) => {
                
                
                let body = editor.getMarkdown();
                
                
                let formData = new FormData();
                formData.append('full_path', full_path);
                formData.append('body', body);
                formData.append('save_as_source', '1');

                fetch('/api/file/edit', {
                    method: 'POST',
                    body: formData,
                })
                    .then((r) => r.json())
                    .then((js) => {
                        if (js.code == '200') {
                            
                            let arr = full_path.split('/');
                            arr.pop();
                            
                            let result_url = arr.join('/')
                            if( result_url.length == 0 ){
                                result_url = '/';
                            }
                            
                            location.href = result_url;
                            
                        } else {
                            if (js.msg) {
                                alert(js.msg);
                            }
                        }
                    })
                    .catch((err) => {
                        console.error(err);
                    });
                    
            });
        }
        
        
        
        const change_view_button = $('#change_view_button');
        if (change_view_button) {
            change_view_button.addEventListener('click', (ev) => {
                
                
                if( editor.mdPreviewStyle == "tab" ){
                    editor.changePreviewStyle("vertical")
                }else{
                    editor.changePreviewStyle("tab")
                }
                    
            });
        }
        
        const cancel_button = $('#cancel_button');
        if (cancel_button) {
            cancel_button.addEventListener('click', (ev) => {
                
                let arr = full_path.split('/');
                arr.pop();
                
                let result_url = arr.join('/')
                if( result_url.length == 0 ){
                    result_url = '/';
                }
                
                location.href = result_url;
                    
            });
        }
        
        
    
    })();
    
</script>
