{% extends "main/base.html" %}
{% block title %}Wiki | Home{% endblock %}
{% block og_title %}Wiki | Home{% endblock %}
{% block og_description %}Landing page for the wiki{% endblock %}
{% block extra_head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="application/javascript"></script>
{% endblock %}
{% block content %}
    <div class="uk-container uk-section">
        <form uk-grid class="uk-grid-small" action="{{ url_for("wiki.edit", page=page) }}" method="post">
            <div class="uk-width-expand">
                <input name="title" id="title" placeholder="Page Title" value="{{ title }}" class="uk-input" />
            </div>
            <div class="uk-width-auto">
                <button class="uk-button uk-button-secondary" type="button" value="Preview" id="preview">Preview</button>
            </div>
            <div class="uk-width-auto">
                <button class="uk-button uk-button-primary" type="submit" value="Save">Save</button>
            </div>
            <div class="uk-width-1-1">
{#                <label for="rst">Document: </label>#}
                <div id="rst" class="uk-textarea" style="resize: vertical; min-height: 10rem;">{{ rst }}</div>
            </div>

            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        </form>

        <h2 class="uk-h2">Preview</h2>

        <div id="preview-div">
            <p>Preview will appear here.</p>
        </div>
    </div>

    <script type="application/javascript">
        "use strict";

        let csrf_token = "{{ csrf_token() }}";

        document.getElementById("preview").onclick = function(event) {
            let oReq = new XMLHttpRequest();

            oReq.addEventListener("load", function() {
                let response = JSON.parse(this.responseText);

                if (response.error !== undefined) {
                    if (response.error_lines !== undefined) {
                        editor.session.setAnnotations(response.error_lines);
                        document.getElementById("preview-div").innerHTML ="<h3>Error - see editor margin</h3>";
                    } else {
                        console.log("Error: " + response.error);
                        document.getElementById("preview-div").innerHTML ="<h3>Error</h3><p>" + response.error + "<p>";
                    }
                } else {
                    document.getElementById("preview-div").innerHTML = response.data;
                    editor.session.setAnnotations([]);
                }
            });

            oReq.open("POST", "/render");

            oReq.setRequestHeader("Content-type", "application/json");
            oReq.setRequestHeader("X-CSRFToken", csrf_token);

            oReq.send(JSON.stringify({"data": editor.getValue()}));

            return false;
        };

        let editor = ace.edit("rst");
        let timer;

        editor.session.setMode("ace/mode/rst");
        editor.setTheme("ace/theme/iplastic");
        editor.on("input", function() {
            if (timer !== undefined) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {document.getElementById("preview").click()}, 1000);
        })
    </script>
{% endblock %}