{% extends "base.html" %}

{% block title %}Edit {{ plan_file.name }} - {{ project.name }} - flanner{% endblock %}

{% block content %}
<div class="form-page">
    <nav class="breadcrumb" aria-label="Breadcrumb"><a href="/">~</a><span class="crumb-sep"> / </span><a href="/projects">projects</a><span class="crumb-sep"> / </span><a href="/projects/{{ project.id }}">{{ project.name }}</a><span class="crumb-sep"> / </span><a href="/plans/{{ plan_file.id }}">{{ plan_file.name }}</a><span class="crumb-sep"> / </span><span class="crumb-here">edit</span></nav>
    <header class="page-header">
        <div>
            <h1>Edit Plan File</h1>
            <p class="page-subtitle">
                {{ plan_file.name }} v{{ plan_file.current_version }}
                in <a href="/projects/{{ project.id }}">{{ project.name }}</a>
            </p>
        </div>
        <a href="/plans/{{ plan_file.id }}" class="btn btn-secondary">
            Back to View
        </a>
    </header>

    <div class="alert alert-info">
        <strong>Note:</strong> Saving will create a new version (v{{ plan_file.current_version + 1 }}).
        Previous versions are preserved and can be viewed in the history.
    </div>

    <div class="form-container">
        <form method="POST" action="/plans/{{ plan_file.id }}/edit" class="form">
            <div class="form-group">
                <label for="content">Content <span class="required">*</span></label>
                <textarea
                    id="content"
                    name="content"
                    class="form-control markdown-editor"
                    rows="25"
                    required
                >{{ content }}</textarea>
                <small class="form-help">
                    Edit in Markdown format. Frontmatter will be updated automatically.
                </small>
            </div>

            <div class="form-group">
                <label for="notes">Version Notes</label>
                <textarea
                    id="notes"
                    name="notes"
                    class="form-control"
                    rows="3"
                    placeholder="What changed in this version? (optional)"
                ></textarea>
                <small class="form-help">
                    Add notes about what you changed in this version (changelog)
                </small>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    Save (Create v{{ plan_file.current_version + 1 }})
                </button>
                <a href="/plans/{{ plan_file.id }}" class="btn btn-secondary">
                    Cancel
                </a>
            </div>
        </form>
    </div>

    <div class="info-box">
        <h3>Version Information</h3>
        <div class="version-info-grid">
            <div>
                <strong>Current Version:</strong> v{{ version.version }}
            </div>
            <div>
                <strong>Created By:</strong> {{ version.created_by }}
            </div>
            <div>
                <strong>Last Updated:</strong> {{ version.created_at|relative_time if version.created_at }}
            </div>
            <div>
                <strong>New Version Will Be:</strong> v{{ plan_file.current_version + 1 }}
            </div>
        </div>
    </div>
</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 %}