{% load i18n %}
<a id="ghostdown_editor_trigger" href="#">{% trans 'Open editor' %}</a>
{{ original|safe }}

<div id="ghostdown_editor_dialog">
  <div class="features">
    <section class="editor">
      <div class="outer">
        <div class="editorwrap">
          <section class="entry-markdown">
            <section class="entry-markdown-content">
              <textarea id="{{ ghostdown_id }}">{{ content }}</textarea>
            </section>
          </section>
        </div>
      </div>
    </section>
  </div>
</div>

<script>
(function ($, CodeMirror) {
  'use strict';
  $(document).ready(function () {
    var ghostdownTextArea = document.getElementById('{{ ghostdown_id }}');
    if (!ghostdownTextArea)
      return;
    var editor = CodeMirror.fromTextArea(ghostdownTextArea, {
      'mode': {
        'name': 'markdown',
        'fencedCodeBlocks': true,
        'underscoresBreakWords': false
      },
      'tabMode': 'indent',
      'lineWrapping': true
    });
    editor.on("change", function () {
      $('#{{ original_id }}').val(editor.getValue());
    });
    $('#ghostdown_editor_dialog').dialog({
      'autoOpen': false,
      'modal': true
    });

    $('#ghostdown_editor_trigger').click(function (e) {
      e.preventDefault();
      $('#ghostdown_editor_dialog')
        .dialog('open')
        .dialog('option', 'height', $(window).height() * 0.8)
        .dialog('option', 'width', $(window).width() * 0.9);
      editor.refresh();
    });
  });
}(grp.jQuery, CodeMirror));
</script>