{% extends base.html %}

{% block head %}
<script src="{{_server_home}}/_static/lib/codemirror/codemirror.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{_server_home}}/_static/lib/codemirror/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="{{_server_home}}/_static/lib/codemirror/theme/monokai.min.css">
<script type="text/javascript" src="{{_server_home}}/_static/lib/codemirror/mode/markdown.js"></script>

<link rel="stylesheet" type="text/css" href="{{_server_home}}/_static/lib/bootstrap-tagsinput/bootstrap-tagsinput.css">
<script type="text/javascript" src="{{_server_home}}/_static/lib/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript" src="{{_server_home}}/_static/lib/csv.js/csv.js"></script>
<script type="text/javascript" src="{{_server_home}}/_static/lib/marked/marked.js"></script>
<script type="text/javascript" src="{{_server_home}}/_static/js/marked-ext.js"></script>

<style>
.CodeMirror {
    width: 60rem;
    font-size:16px;
    height: auto;
}

#markdown-input {
    font-family: monospace;
}

</style>
{% end %}

{% block body %}
    <div>
        <span id="result" style="color:green"></span>
    </div>
        
    {% if type == "dir" %}
        <div>
            {% for child in children %}
                <li style="padding-top:6px;">
                    {% if child.type == "dir" %}
                        <img src="/static/image/folder.gif"/>
                    {% end %}
                    <a href="{{_server_home}}/wiki{{child.path}}">{{ child.name }}</a>
                </li>
            {% end %}
        </div>
    {% elif type == "file" %}
        <h3>{{basename}}</h3>
        <form method="POST">
            <button>保存</button>
        <div style="padding-top:20px;">
            <div id="epiceditor" class="row">
                <div id="markdown-input-div" class="col-md-6">
                    <textarea id="markdown-input" class="form-control" name="content" rows=50>{{?content}}</textarea>
                </div>
                
                <div id="markdown-output-div" class="col-md-6">

                </div>
            </div>
        </div>
        </form>
    {% end %}
    
    
<div style="float:left;width:100%;">
<script>
    function switchRename() {
        if ($("#renameDiv").css("display") == "none") {
            $("#oldName").hide();
            $("#renameDiv").css("display", "block");
            $("#newName").val($("#oldName").html());
        } else {
            $("#oldName").show();
            $("#renameDiv").css("display", "none");
        }
    }

    function edit() {
        $("#markdown-input-div").removeClass("hide");
        $("#markdown-output-div").removeClass("col-md-12").addClass("col-md-6");
        var height = Math.max(500, $("#markdown-output-div").height());
        $("#markdown-input").css({height:height+"px"});
        $("#edit-div").show();
        $("#edit-btns").hide();

        var editor = $("#markdown-input")[0];
        var codeMirror = CodeMirror.fromTextArea(editor, {
            lineNumbers:true,
            mode: "text/x-markdown",
            // theme:"xq-light",
            // theme: "monokai",
            lineWrapping: true,
            fixedGutter: true,
        });
        codeMirror.on("update", function (codeMirror, changeObj) {
            console.log("update");
            $("#markdown-input").val(codeMirror.doc.getValue());
        })
        window.codeMirror = codeMirror;
        codeMirror.setSize("auto", height);
    }
    
    function preview() {
        if (!$("#markdown-input-div").hasClass("hide")) {
            $("#markdown-input-div").addClass("hide");
            $("#markdown-output-div").removeClass("col-md-6").addClass("col-md-12");
        }
    }

    function escape(html, encode) {
        return html
        .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
    }

    function highlight_csv (code) {
        try {
            // var csv = new CSV(code);
            var rows = CSV.parse(code);
            // console.log(rows);
            var table = $("<table>");
            for (var i = 0; i < rows.length; i++) {
                var col = rows[i];
                var tr = $("<tr>");
                for (var j = 0; j < col.length; j++) {
                    var td = $("<td>").html(col[j]);
                    tr.append(td);
                }
                table.append(tr);
            }
            console.log(table);
            window.csv_table = table;
            return "<table class='table'>" + table.html() + "</table>";
        } catch (e) {
            console.log(e);
            return escape(code);
        }

    }

    function highlight (code, lang) {
        console.log(code, lang);
        if (lang) {
            lang = lang.toUpperCase();
        }
        if (lang == "CSV") {
            return highlight_csv(code);
        } else if (lang=="EXCEL") {
            code = code.replace(/\t/gi, ",");
            // some \t may be replaced by four space
            code = code.replace(/ {4}/gi, ',');
            console.log(code);
            return highlight_csv(code);
        } else {
            return escape(code);
        }
    }

    // set marked code highlight function
    marked.defaults.highlight = highlight;

    $(function () {
        var old_content = "";

        function repaint() {
            var input = $("#markdown-input").val();
            // not modified
            if (input == old_content) {
                return;
            }
            if ($("#markdown-output-div").hasClass("hide")) {
                return;
            }
            old_content = input;
            var outtext = marked.parse(input);
            $("#markdown-output-div").html(outtext); 
        }
        repaint();
        edit();
        
        setInterval(repaint, 200);
    })
</script>

{% end %}