{% extends base %}

{% block head %}
<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?ts={{_ts}}"></script>

<style type="text/css">
.root {
    padding-left: 0px;
}

.x-body {
    left: 0px;
}

.nav-left-search {
    display: none;
}

img {
    max-width: 100%;
}

.nav-left {
    width: 0px;
}

.main-content {
    padding-left: 10px;
}

.content-left {
    width: 100%;
}
</style>

<script>
xnote.config.isPrintMode = true;
xnote.loadStyle();
</script>

{% end %}

{% block body %}

<h3 style="text-align:center;">{{note.name}}</h3>
<hr/>

{% if note.data == "" %}
<div class="col-md-12" 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 hide" name="content" rows=50>{{note.content}}</textarea>
        </div>

        <div id="markdown-output-div" class="col-md-12">

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

<script type="text/javascript">
    $(function () {
        var input = $("#markdown-input").val();
        var outtext = marked.parse(input);
        $("#markdown-output-div").html(outtext);
        window.print();
    })
</script>
{% else %}
    {% raw note.data %}
{% end %}

{% end %}