{% extends "study/base.html" %}
{% block title %}{% if note %}Edit note{% else %}Add note{% endif %}{% endblock %}
{% block content %}
<div class="page-head">
  <h1>{% if note %}Edit note{% else %}Add note{% endif %}</h1>
  {% if note %}<form method="post" action="{% url 'note_delete' note.pk %}" onsubmit="return confirm('Delete this note and its cards?')">{% csrf_token %}<button class="btn danger">Delete</button></form>{% endif %}
</div>
<div class="editor">
  <form method="post" class="panel stack" id="note-form" data-preview="{% url 'api_preview' %}" data-note-type="{{ note_type.pk }}">{% csrf_token %}
    {% if error %}<div class="flash flash-error">{{ error }}</div>{% endif %}
    <div class="row">
      <label>Type
        <select name="note_type" id="note-type" {% if note %}disabled{% endif %}>
          {% for t in note_types %}<option value="{{ t.pk }}" {% if t.pk == note_type.pk %}selected{% endif %}>{{ t.name }}</option>{% endfor %}
        </select>
      </label>
      <label>Deck
        <select name="deck">
          {% for d in decks %}<option value="{{ d.pk }}" {% if d.pk == deck_id %}selected{% endif %}>{{ d.full_name }}</option>{% endfor %}
        </select>
      </label>
    </div>
    {% if note %}<input type="hidden" name="note_type" value="{{ note_type.pk }}">{% endif %}
    {% for i, name, value in field_rows %}
    <label>{{ name }}
      <textarea name="field_{{ i }}" data-field="{{ name }}" rows="{% if note_type.is_cloze and forloop.first %}4{% else %}2{% endif %}">{{ value }}</textarea>
    </label>
    {% endfor %}
    {% if note_type.is_cloze %}<p class="muted small">Cloze syntax: <code>{{"{{"}}c1::answer::optional hint}}</code>. Use c2, c3… for more cards; clozes may nest.</p>{% endif %}
    <label>Tags <input name="tags" value="{{ tags }}" placeholder="space separated"></label>
    <div class="actions"><button class="btn primary">{% if note %}Save{% else %}Add{% endif %} <kbd>Ctrl+Enter</kbd></button></div>
  </form>
  <section class="preview">
    <h2>Live preview</h2>
    <style id="card-css">{{ note_type.css }}</style>
    <div id="preview"><p class="muted">Start typing to preview the generated cards.</p></div>
  </section>
</div>
{% endblock %}
{% block scripts %}{% load static %}<script type="module" src="{% static 'study/editor.js' %}"></script>{% endblock %}