{{ template "base.html" . }}

{{ define "extrahead" }}
    <link rel="stylesheet" href="{{ static "editor.css" }}" />
    <script src="{{ static "util.js" }}"></script>
    <script src="{{ static "editor.js" }}"></script>

    <script src="{{ static "go_wasm_exec.js" }}"></script>
    <script>
        const go = new Go();
        WebAssembly.instantiateStreaming(fetch("{{ static "parsing.wasm" }}"), go.importObject).then(result => {
            go.run(result.instance);
        });
    </script>
{{ end }}

{{ define "content" }}
<div class="content-block">
    <form action="{{ .SubmitUrl }}" method="post">
        {{ csrftoken .Session }}

        <input class="b w-100 mb1" name="title" type="text" placeholder="Post title..." value="{{ .PostTitle }}"/>
        {{/* TODO: Reintroduce the toolbar in a way that makes sense for Markdown */}}
        {{/*
        <div class="toolbar" id="toolbar">
            <input type="button" id="bold" value="B" />
            <input type="button" id="italic" value="I" /> 
            <input type="button" id="underline" value="U" /> 
            <input type="button" id="monospace" value="monospace" /> 
            <input type="button" id="url" value="url" /> 
            <input type="button" id="img" value="img" /> 
            <input type="button" id="code" value="code" /> 
            <input type="button" id="quote_simple" value="quote (anon)" /> 
            <input type="button" id="quote_member" value="quote (member)" /> 
            <input type="button" id="spoiler" value="spoiler" /> 
            <input type="button" id="lalign" value="Left" /> 
            <input type="button" id="calign" value="Center" /> 
            <input type="button" id="ralign" value="Right" />
            <input type="button" id="ulist" value="ul" />
            <input type="button" id="olist" value="ol" />
            <input type="button" id="litem" value="li" />
            <input type="button" id="youtube" value="youtube" />
        </div>
        */}}
        <textarea id="editor" class="w-100 minw-100 mw-100 h5 minh-5" name="body">{{ .PostBody }}</textarea>

        <div class="flex flex-row-reverse justify-start mt2">
            <input type="submit" class="button ml2" name="submit" value="{{ .SubmitLabel }}" />
            <input type="submit" class="button ml2" name="preview" value="{{ .PreviewLabel }}" />
        </div>

        <div class="post post-preview mv3 mathjax">
            <div id="preview" class="body contents"></div>
        </div>

        {{/*
        {% if are_editing %}
            <span class="editreason">
                <label for="editreason">Edit reason:</label>
                <input name="editreason" maxlength="255" type="text" id="editreason" value="{% if preview_edit_reason|length > 0 %}{{preview_edit_reason}}{% endif %}"/>
            </span>
        {% endif %}
        
        {% if user.is_staff and post and post.depth == 0 %}
            <div class="checkbox sticky">
                <input type="checkbox" name="sticky" id="sticky" {% if thread.sticky %}checked{% endif%} />
                <label for="sticky">Sticky thread</label>
            </div>
        {% endif %}

        
        
        {% if are_previewing %}
            {% include "edit_preview.html" %}
        {% endif %}

        {% if context_reply_to %}
            <h4>The post you're replying to:</h4>
            <div class="recent-posts">
                {% with post=post_reply_to %}
                    {% include "forum_thread_single_post.html" %}
                {% endwith %}
            </div>
        {% endif %}

        {% if context_newer %}
            <h4>Replies since then:</h4>
            <div class="recent-posts">
                {% for post in posts_newer %}
                    {% include "forum_thread_single_post.html" %}
                {% endfor %}
            </div>
        {% endif %}

        {% if context_older %}
            <h4>Replies before then:</h4>
            <div class="recent-posts">
                {% for post in posts_older %}
                    {% include "forum_thread_single_post.html" %}
                {% endfor %}
            </div>
        {% endif %}
        */}}
    </form>
</div>

<script>
    const tf = document.querySelector('#editor');
    const preview = document.querySelector('#preview');

    function updatePreview() {
        const previewHtml = parseMarkdown(tf.value);
        preview.innerHTML = previewHtml;
        MathJax.typeset();
    }

    tf.addEventListener('input', () => {
        updatePreview();
    });
</script>
{{ end }}