{% extends "notes/base.html" %}
{% load static %}
{% block title %}{% if note %}Edit {{ note.title }}{% else %}New note{% endif %}{% endblock %}
{% block content %}
<form method="post" id="edit-form" data-preview-url="{% url 'api_preview' %}" data-suggest-url="{% url 'api_suggest' %}" data-upload-url="{% url 'attachment_upload' %}" data-note-id="{{ note.pk|default:'' }}">
  {% csrf_token %}
  {% if error %}<div class="msg error">{{ error }}</div>{% endif %}
  <input class="title-input" type="text" name="title" value="{{ title }}" placeholder="Title" required aria-label="Title">
  <div class="editor-bar">
    <button type="button" class="btn small" id="toggle-preview">Preview</button>
    <span class="muted" id="save-status">Ctrl+S to save</span>
    {% if not note and templates %}<span class="muted">Templates:</span>{% for t in templates %}<a class="btn tiny" href="?template={{ t|urlencode }}&title={{ title|urlencode }}">{{ t }}</a>{% endfor %}{% endif %}
    <label class="btn small file-btn">Add image<input type="file" id="image-input" accept="image/png,image/jpeg,image/gif,image/webp" hidden></label>
  </div>
  <div class="editor-wrap">
    <textarea name="body" id="body" spellcheck="true" placeholder="Write Markdown. Link with [[Note]], embed with ![[Note]], tag with #topic.">{{ body }}</textarea>
    <div class="prose preview" id="preview" hidden></div>
    <ul class="suggest" id="suggest" hidden></ul>
  </div>
  <p><button class="btn primary" type="submit">Save</button>
    <a class="btn" href="{% if note %}{% url 'note_detail' note.slug %}{% else %}{% url 'home' %}{% endif %}">Cancel</a></p>
</form>
{% if note %}
<form method="post" action="{% url 'note_delete' note.slug %}" onsubmit="return confirm('Delete this note permanently?')">{% csrf_token %}<button class="btn danger small">Delete note</button></form>
{% endif %}
{% endblock %}
{% block right %}{% if note %}{% include "notes/_panel.html" %}{% else %}<section class="panel"><h3>Tips</h3><p class="muted">Type <code>[[</code> to autocomplete note titles. Use <code>[[Note#Heading]]</code> or <code>[[Note^block]]</code> to link inside a note.</p></section>{% endif %}{% endblock %}
{% block scripts %}<script type="module" src="{% static 'notes/js/editor.js' %}"></script>{% endblock %}