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

<!-- Page CSS -->
<link rel="stylesheet" href="css/codemirror.css">
<link rel="stylesheet" href="css/codemirror_lucario.css">
<style>
    .cm-s-lucario{
        font-size: 1.05rem !important;
    }
    .CodeMirror{
        height: calc(100vh - 250px);
    }
</style>

<!-- 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="js/codeEditor/mode/simple.js"></script>
<script src="js/codeEditor/mode/fivem-cfg.js"></script>
<script>
    //============================================== CodeMirror Setup
    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
        });
    };


    //============================================== Save action
    $('#cfgEditor-save').click(function () {
        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>' }, {});

        $.ajax({
            type: "POST",
            url: '/cfgEditor/save',
            timeout: timeoutMedium,
            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>
