{{ define "title" }}Page Editor{{ end }}
{{ define "content" }}
<h1>Edit: {{ .Data.File }}</h1>

{{ if .Data.FromCore }}
    <p>
        <strong>Note:</strong> this page is from the blog core root, so changes
        made will be saved to your user root instead.
    </p>
{{ end }}

<style type="text/css" media="screen">
#editor-box {
    position: relative;
    display: none;
    width: 100%;
    height: 500px;
}
#ace-editor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#ace-buttons {
    display: none;
}
</style>

<form action="/admin/editor" method="POST">
    <input type="hidden" name="_csrf" value="{{ .CSRF }}">
    <input type="hidden" name="save" value="true">

    <div class="form-group">
        <label for="file">
            Filepath:
        </label>
        <input type="text"
            size="40"
            id="file"
            name="file"
            value="{{ .Data.File }}"
            placeholder="path/to/file.gohtml"
            class="form-control"
            required>
    </div>

    <div class="form-group">
        <label for="body">
            Content:
        </label>
        <div id="editor-box">
            <div id="ace-editor">{{ .Data.Body }}</div>
        </div>

        <div id="ace-buttons">
            Syntax:
                <a href="#" onClick="return setSyntax('html')" class="btn btn-secondary btn-sm">HTML</a>
                <a href="#" onClick="return setSyntax('markdown')" class="btn btn-secondary btn-sm">Markdown</a>
                <a href="#" onClick="return setSyntax('javascript')" class="btn btn-secondary btn-sm">JS</a>
                <a href="#" onClick="return setSyntax('css')" class="btn btn-secondary btn-sm">CSS</a>
                <a href="#" onClick="return setSyntax('text')" class="btn btn-secondary btn-sm">None</a>
        </div>
        <textarea
            cols="40"
            rows="12"
            id="body"
            name="body"
            class="form-control"
            required>{{ .Data.Body }}</textarea>

        <button id="ace-toggle-button" type="button" class="mt-2 btn btn-sm btn-secondary">
            Toggle Rich Code Editor
        </button>
    </div>

    <p>
        <button type="submit" name="action" value="save" class="btn btn-primary">Save Page</button>
        <button type="submit" name="action" value="delete" class="btn btn-danger" onClick="return window.confirm('Are you sure?')">Delete Page</button>
    </p>
</form>

<script src="/js/ace-toggle.js"></script>
<script src="/js/ace-editor/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var ACE;
(function() {
    if (DISABLE_ACE_EDITOR) {
        return;
    }

    var editor = ace.edit("ace-editor");
    ACE = editor;
    document.querySelector("#editor-box").style.display = "block";
    document.querySelector("#ace-buttons").style.display = "block";
    document.querySelector("#body").style.display = "none";

    // Default editor settings
    editor.setTheme("ace/theme/monokai");
    var ses = editor.getSession();
    ses.setTabSize(4);
    ses.setUseSoftTabs(false);
    ses.setUseWrapMode(true);

    // On save.
    ses.on("change", function() {
        document.getElementById("body").value = editor.getValue();
    });

    var filename = "{{ .Data.File }}";
    var parts = filename.split(".");
    var ext = parts.pop().toLowerCase();
    if (ext === "js") {
        ses.setMode("ace/mode/javascript");
    } else if (ext === "gohtml" || ext === "html") {
        ses.setMode("ace/mode/html");
    } else if (ext === "md" || ext === "markdown") {
        ses.setMode("ace/mode/markdown");
        ses.setTabSize(2);
    } else if (ext === "css") {
        ses.setMode("ace/mode/css");
    }
})();

function setSyntax(lang) {
    if (typeof(ACE) !== undefined) {
        ACE.getSession().setMode("ace/mode/"+lang);
    }
    return false;
}
</script>

{{ end }}