{% extends "pages/wiki/base.html" %}

{% block title -%}
Wiki Editor
{%- endblock title %}

{% block content %}
{% from 'macros/render_form.html' import submitcancel_render_form %}
<ul class="nav nav-tabs">
	<li class="active"><a href="#editor" data-toggle="tab"><h4>Editor</h4></a></li>
	<hr>
	<li><a href="#preview" data-toggle="tab" id="previewlink"><h4>Preview</h4></a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="editor">
		{{ submitcancel_render_form(form) }}
	</div>
	<div class="tab-pane" id="preview"></div>
</div>
{% endblock content %}

{% block sidebar %}
<hr>
<hr>
<ul class="nav nav-tabs">
	<li class="active"><a href="#howto" data-toggle="tab" id="howtolink"><h4>Editor How-To</h4></a></li>
</ul>
<div class="tab-content" id="howtocontent">
	<p></p>
<p>This editor is <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">markdown</a> featured.</p>
<pre><code>* I
* am
* a
* list</code></pre>
Turns into:
<ul>
<li>I</li>
<li>am</li>
<li>a</li>
<li>list</li>
</ul>
<p><code>**bold** and *italics*</code> turn into <strong>bold</strong> and <em>italics</em>. Very easy!</p>
<p>Create links with <code>[GitHub](https://www.github.com)</code>. They turn into <a href="https://www.github.com">GitHub</a>.</p>
<p>Headers are as follows:</p>
<pre><code># Level 1
## Level 2
### Level 3</code></pre>
<p></p>
</div>

{% endblock sidebar %}

{% block postscripts -%}
{{ super() }}
$('#previewlink').on('click', function() {
  var $form = $('form');
  var $inputs = $form.find('input, textarea, button');
  var $pre = $('#preview');
  console.log($pre);
  var bodycontent = 'title: preview\n\n' + $form.find('textarea').val();
  $inputs.prop('disabled', true);
  $pre.removeClass('alert').removeClass('alert-error').html("Loading...");
  $.ajax({
    url: "{{ url_for('wikipreview') }}",
    type: "POST",
    data: { body: bodycontent },
    success: function(msg) {
      $pre.html(msg);
      console.log(msg);
    },
    error: function() {
			$pre.addClass('alert').addClass('alert-error');
      $pre.html('There was a problem with the preview.');
    },
    complete: function() {
      $inputs.prop('disabled', false);
    }
  });
});
$('#previewbtn').on('click', function(event) {
	event.preventDefault();
	$('#previewlink').click();
});
$('#howtolink').on('click', function() {
	$('#howtocontent').toggle();
});
$('#howtobtn').on('click', function(event) {
	event.preventDefault();
	$('#howtolink').click();
});
{%- endblock postscripts %}
