{% extends 'base.html' %}
{% block content %}
<article class="edit-page">
  <form action="{{ request.root_path + request.path }}" method="post">
    <div class="mb-3">
      <label for="page-title" class="form-label">Title</label>
      <input type="text" class="form-control" id="page-title" name="page-title" aria-describedby="page-title-help" value="{{ page.title }}">
      <div id="page-title-help" class="form-text">The title of the page</div>
    </div>
    <div class="mb-3">
      <label for="page-body" class="form-label">Body</label>
      <textarea id="page-body" name="page-body" class="form-control font-monospace" style="display:none" aria-describedby="page-body-help">{% if page.body %}{{ page.body }}{% endif %}</textarea>
      <div><div><div id="editor"><div></div></div>
      <div id="page-body-help" class="form-text">The content of the page, in reStructuredText</div>
    </div>
    <div class="mb-3">
      <button type="submit" class="btn btn-primary">Save</button>
    </div>
  </form>
</article>
<style>
  #editor {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    height: 20rem;
    width: 100%;
  }
</style>
<script src="/static/js/ace/ace.js"></script>
<script>
  var editor = ace.edit("editor", {mode: "ace/mode/rst", showPrintMargin: false, useSoftTabs: true});
  editor.setValue(document.getElementById("page-body").value, -1);
  editor.on('change', function() {
    document.getElementById("page-body").value = editor.getSession().getValue();
  });
</script>
{% endblock %}
