{% extends wide_base %}

{% block head %}
{% set-global markdown_content = content %}
{% include common/script/load_markdown.html %}
<style>
.CodeMirror {
    width: 60rem;
    font-size:16px;
    height: auto;
}

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

.markdown-output-div {
    overflow: auto;
}

</style>
{% end %}

{% block body_left %}
    {% init path = "" %}
    {% init error = "" %}
    {% init embed = False %}

    {% if error != "" %}
    <div class="col-md-12 error">
        {{?error}}
    </div>
    {% end %}

    <div class="grid-card">
        <h3 class="card-title btn-line-height">
            <span>文本预览</span>
            <div class="float-right">
                {% if _is_admin and path != "" %}
                    <a class="btn btn-default" href="{{_server_home}}/code/edit?path={{path}}&embed={{embed}}">编辑</a>
                {% end %}
                
                <a class="btn btn-default" href="javascript:history.back()">返回</a>
            </div>
        </h3>
    </div>

    <div class="card">
        
        {% if _is_admin and path != "" and not embed %}
            {% include "mod_fs_path.html" %}
        {% end %}
        
        <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-12 markdown-output-div">

            </div>
        </div>
    </div>
    

<script>
    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 () {
        var old_content = $("#markdown-input-div").val();
        setInterval(function () {
            var input = $("#markdown-input").val();
            // not modified
            if (input == old_content) {
                return;
            }
            old_content = input;
            
            markedConfig.showSystemContents = false;
            markedConfig.showMenu = true;

            $("#markdown-output-div").html(marked.parse(input));
            marked.afterRender();
        }, 200);
        preview();
    })
</script>

{% end %}