{{define "head"}}<title>Markdown Preview</title>
<style type="text/css">
	textarea {
		margin: 2em 0 1em;
		min-height: 10em;
		font-size: 1em;
		border: 1px solid #ccc !important;
		padding: 1em;
		border-radius: 0.25em;
		resize: vertical;
	}
</style>

<script>
    function preview() {
        var $submit = document.querySelector('input[type=submit]');
        $submit.disabled = true;
        $submit.value = '...';
        var http = new XMLHttpRequest();
        var url = "https://write.as/api/markdown";
        var params = {
            "raw_body": document.querySelector('#writer').value,
        }
        http.open("POST", url, true);
        http.setRequestHeader("Content-type", "application/json");
        http.onreadystatechange = function() {
            if (http.readyState == 4) {
                $submit.disabled = false;
                $submit.value = 'Preview';
                if (http.status == 200) {
                    data = JSON.parse(http.responseText);
                    document.querySelector('#preview').innerHTML = data.data.body;
                } else {
                    alert("Failed: "+http.status);
                }
            }
        }
        http.send(JSON.stringify(params));
    }
</script>
{{end}}

{{define "body-attrs"}}id="post"{{end}}

{{define "content"}}
	<div class="content-container tight" style="margin-bottom: 0;">
		<h1 id="markdown">Markdown Preview</h1>
		<p>This uses the Write.as / WriteFreely API to generate HTML from the given Markdown content.</p>
		<p><a href="https://developers.write.as/docs/api/#render-markdown">Read the documentation</a>.</p>
	</div>

	<div class="content-container">
		<form method="post" action="https://write.as/api/markdown" onsubmit="preview(); return false;">
				<textarea id="writer" name="raw_body" placeholder="Write..." class="norm" autofocus># Test out some Markdown

Enter anything here and press **Preview** to see what it looks like.</textarea>
			<input type="submit" value="Preview" />
		</form>
	</div>

	<hr />

	<article class="norm h-entry" id="preview"><p style="display: block; text-align:center; font-style:italic; color:#999;">(Post preview will appear here.)</p></article>
{{end}}