{% extends "base.html" %}
{% block title %}Editing {{ plan_file.name }}{% endblock %}

{% block topbar_back %}
<a class="btn back" href="/plans/{{ plan_file.id }}" aria-label="Back to the plan" title="Back to the plan"><span aria-hidden="true">←</span></a>
{% endblock %}

{% block topbar_main %}
<nav class="crumbs" aria-label="Breadcrumb">
    <a href="/projects">Projects</a><span class="sep">/</span>
    <a href="/projects/{{ project.id }}">{{ project.name }}</a><span class="sep">/</span>
    <a href="/plans/{{ plan_file.id }}">{{ plan_file.name }}.md</a><span class="sep">/</span>
    <span class="here">Edit</span>
  </nav>
{% endblock %}

{% block topbar_actions %}
<span class="pill pill-quiet">v{{ version.version }} → v{{ version.version + 1 }}</span>
    <a class="btn" href="/plans/{{ plan_file.id }}">Cancel</a>
    <button class="btn btn-primary" type="submit" form="plan-edit-form">Save new version</button>
{% endblock %}

{% block content %}
<div class="pane">
  <form method="POST" action="/plans/{{ plan_file.id }}/edit" id="plan-edit-form"
        class="editor-shell" data-full-load>

    <div class="field">
      <label class="field-label" for="content">Content</label>
      <textarea class="textarea mono" id="content" name="content" rows="24"
                spellcheck="false">{{ content }}</textarea>
    </div>

    <div class="field">
      <label class="field-label" for="notes">What changed <span class="opt">(optional)</span></label>
      <textarea class="textarea" id="notes" name="notes" rows="2"
                placeholder="One line, so the history reads as a story."></textarea>
    </div>

    <div class="footnote">
      <span class="i" aria-hidden="true">i</span>
      Saving writes a new version rather than overwriting this one.
      <kbd>Ctrl</kbd><kbd>S</kbd> saves from inside the editor.
    </div>
  </form>
</div>
{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', path='/vendor/codemirror/codemirror.min.css') }}">
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', path='/vendor/codemirror/codemirror.min.js') }}"></script>
<script src="{{ url_for('static', path='/vendor/codemirror/mode/xml/xml.min.js') }}"></script>
<script src="{{ url_for('static', path='/vendor/codemirror/mode/markdown/markdown.min.js') }}"></script>
<script src="{{ url_for('static', path='/vendor/codemirror/addon/selection/active-line.min.js') }}"></script>
<script src="{{ url_for('static', path='/vendor/codemirror/addon/edit/continuelist.min.js') }}"></script>
<script>
// Progressive enhancement: mount CodeMirror over the plain textarea. If the
// script fails to load the textarea keeps working, and fromTextArea copies the
// content back on form submit so the POST body is unchanged.
(function () {
  var ta = document.getElementById('content');
  if (!ta || typeof CodeMirror === 'undefined') return;
  var cm = CodeMirror.fromTextArea(ta, {
    mode: 'markdown',
    lineNumbers: true,
    lineWrapping: true,
    styleActiveLine: true,
    indentUnit: 4,
    theme: 'flanner',
    extraKeys: {
      'Enter': 'newlineAndIndentContinueMarkdownList',
      'Tab': function (c) { c.replaceSelection('    '); }
    }
  });
  // Ctrl/Cmd+S saves; keep it working from inside the editor too.
  cm.setOption('extraKeys', Object.assign(cm.getOption('extraKeys') || {}, {
    'Ctrl-S': function () { cm.save(); ta.form.submit(); },
    'Cmd-S': function () { cm.save(); ta.form.submit(); }
  }));
})();
</script>
{% endblock %}