<h2>Edit {{code}} script for {{merchant}} </h2>

<style>
    .CodeMirror {
        width: 100% !important;
        height: 100% !important;
    }
</style>

<form action="/outputedit/savecss/{{stylesheet}}" method="post">
    <textarea name="css" id="codearea">loading...</textarea>
    <br>
    <div style="text-align:right">
        <button type="button" onclick="cancelEdit()">Cancel</button><button type="submit">Update</button>
    </div>
</form>

<br>
{{message}}
<script>
    function startup() {

        //read css file into editor
        let codearea = document.getElementById('codearea');


      /*  $.ajax({
            url: "/css/{{merchant}}/{{stylesheet}}.css",
            dataType: "css",
            success: function (data) {
                $('textarea#codearea').text(data);
                // now init codemirror 
                const codemirrorEditor = CodeMirror.fromTextArea(codearea, {
                    lineNumbers: true,
                    mode: "CSS",
                    theme: "base16-dark"
                });
            }
        }); */
        fetch("/css/{{merchant}}/{{stylesheet}}.css").then((res) =>
            res.text().then((css) => {
                $('textarea#codearea').text(css);
                // now init codemirror 
                const codemirrorEditor = CodeMirror.fromTextArea(codearea, {
                    lineNumbers: true,
                    mode: "css",
                    theme: "base16-dark"
                }); 
            })
        );

 /*fetch("./WebComponent.css").then((res) =>
      res.text().then((css) => {
        style.replaceSync(css);
        this.shadowRoot.adoptedStyleSheets = [style];
      })
    );*/




    };

    function cancelEdit() {

        window.location.href = '/users';
    }
</script>