{% extends 'layout.html' %}
{% block js %}
    {% assets "js_editor" %}
        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
    {% endassets %}
{% endblock %}
{% block body %}
{% block css %}
<style>
    #main-body {
        background: inherit;
        border: inherit;
        padding: 0;
        -webkit-box-shadow: 0;
        -moz-box-shadow: 0;
        box-shadow: 0;
    }
</style>
{% endblock %}


    <div id="app-wrap" class="container-fluid">
        <div id="app-controls" class="row">
            <div class="col-xs-3">
                <input id="page-name" type="text" class="form-control input-sm" name="name" placeholder="Name" value="{{- name -}}" />
            </div>
            <div class="col-xs-3">
                <input id="page-message" type="text" class="form-control input-sm" name="page-message" placeholder="Comment" value="" />
            </div>

            <div class="col-xs-6">
                <div class="pull-right">

                    <a href="#" id="drop6" role="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">Theme <b class="caret"></b></a>
                    <ul id="theme-list" class="dropdown-menu" role="menu" aria-labelledby="drop6">
                        <li><a tabindex="-1" href="#" data-value="ace/theme/chrome" class="">Chrome</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/clouds" class="">Clouds</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/clouds_midnight" class="">Clouds Midnight</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/cobalt" class="">Cobalt</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/crimson_editor" class="">Crimson Editor</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/dawn" class="selected">Dawn</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/dreamweaver" class="">Dreamweaver</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/eclipse" class="">Eclipse</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/idle_fingers" class="">idleFingers</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/kr_theme" class="">krTheme</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/merbivore" class="">Merbivore</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/merbivore_soft" class="">Merbivore Soft</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/mono_industrial" class="">Mono Industrial</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/monokai" class="">Monokai</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/pastel_on_dark">Pastel on Dark</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/solarized_dark" class="">Solarized Dark</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/solarized_light" class="">Solarized Light</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/textmate" class="">TextMate</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/tomorrow" class="">Tomorrow</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/tomorrow_night">Tomorrow Night</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/tomorrow_night_blue" class="">Tomorrow Night Blue</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/tomorrow_night_bright" class="">Tomorrow Night Bright</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/tomorrow_night_eighties" class="">Tomorrow Night 80s</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/twilight" class="">Twilight</a></li>
                        <li><a tabindex="-1" href="#" data-value="ace/theme/vibrant_ink" class="">Vibrant Ink</a></li>
                    </ul>
                    <a id="save-native" class="btn btn-primary btn-sm"><i class="icon-save"></i> Save</a>
                </div>
            </div>
        </div>
        <div id="editor">{{ content }}</div>
        <div id="preview"></div>
    </div>

{% endblock %}