{{@include("header", it)/}}

<!-- Page CSS -->
<!-- <link rel="stylesheet" href="css/codemirror.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css" 
    integrity="sha512-xIf9AdJauwKIVtrVRZ0i4nHP61Ogx9fSRAkCLecmE2dL/U8ioWpDvFCAy4dcfecN72HHB9+7FfQj3aiO68aaaw==" 
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/codemirror_lucario.css">
<style>
    .cm-s-lucario{
        font-size: 1.05rem !important;
    }
    .CodeMirror{
        height: calc(100vh - 250px);
    }
</style>

<!-- Hacky hack but ok, no time to do it better: -->
{{@if(!it.isWebInterface)}}
    <style>.CodeMirror{height: calc(100vh - 150px);}</style>
{{/if}}

<!-- Title -->
<div class="text-center mb-4">
    <h3>Server Config File Editor</h3>
</div>

<!-- CFG Editor -->
<div class="row justify-content-md-center">
    <div class="col-lg-12 col-xl-11 mw-col8">
        <textarea id="codeMirrorTarget" style="height: calc(100vh - 250px); width: 100%;"
            class="cms-s-lucario" name="code">{{it.rawFile}}</textarea>
    </div>
</div>
<div class="row justify-content-md-center" style="margin-top: 1em;">
    <div class="mx-auto">
        <button type="button" id="cfgEditor-save" class="btn btn-outline-dark btn-sm mb-2">Save File</button>
    </div>
</div>


{{@include("footer", it)/}}


<!-- <script src="js/codeEditor/codemirror.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js" 
    integrity="sha512-ZTpbCvmiv7Zt4rK0ltotRJVRaSBKFQHQTrwfs6DoYlBYzO1MA6Oz2WguC+LkV8pGiHraYLEpo7Paa+hoVbCfKw==" 
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/codeEditor/mode/simple.js"></script>
<script src="js/codeEditor/mode/fivem-cfg.js"></script>
<script>
    //============================================== CodeMirror & Hook Setup
    const saveButton = document.getElementById('cfgEditor-save');

    window.onload = function () {
        const codeMirrorTarget = document.getElementById("codeMirrorTarget");
        window.CMInstance = CodeMirror.fromTextArea(codeMirrorTarget, {
            mode: "fivem-cfg",
            lineNumbers: true,
            lineWrapping: true,
            theme: "lucario" //NOTE: I modified the theme a bit
        });

        window.addEventListener("keydown", (event) => {
            if (event.ctrlKey && event.key == 's') {
                console.dir(event)
                event.preventDefault();
                saveButton.click();
            }
        })
    };


    //============================================== Save action
    saveButton.onclick = () =>  {
        const cfgData = window.CMInstance.getValue();
        if(cfgData.length < 1024){
            const notifyWarn = $.notify({ message: `Your CFG file is too small, there is a good chance you deleted something you shouldn't. We are saving an backup file just in case you need it.` }, { type: 'warning' });
        }
        const notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        txAdminAPI({
            type: "POST",
            url: '/cfgEditor/save',
            data: {cfgData},
            dataType: 'json',
            success: function (data) {
                notify.update('progress', 0);
                notify.update('type', data.type);
                notify.update('message', data.message);
            },
            error: function (xmlhttprequest, textstatus, message) {
                notify.update('progress', 0);
                notify.update('type', 'danger');
                notify.update('message', message);
            }
        });
    };
</script>
