{% extends "base.html" %}
{% block title %}Tafseer Notes — QPA{% endblock %}
{% block body %}
<header>
  <h1>📓 Tafseer Notes</h1>
  <div><a href="{{ url_for('tafseer_view') }}">References</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card" style="background:#fef9e7;">
    <p style="font-size:13px; color:#7d6608; margin:0;">
      <strong>These notes are shared, not private.</strong> They're stored against the book/sura
      entry itself, visible to and editable by every admin account — not just yours. If you want a
      genuinely private note, keep it somewhere else for now.
    </p>
  </div>

  {% if saved %}<div class="msg msg-success">Saved.</div>{% endif %}

  <div class="card">
    <form method="post">
      <label>Sura</label>
      <select name="sura_no" onchange="this.form.submit()">
        {% for s in suras %}
        <option value="{{ s.sura_no }}" {% if s.sura_no == sura_no %}selected{% endif %}>{{ s.label }}</option>
        {% endfor %}
      </select>

      <label>Book</label>
      <select name="book_id" onchange="this.form.submit()">
        {% for b in books %}
        <option value="{{ b.id }}" {% if b.id == book_id %}selected{% endif %}>{{ b.book_name }}</option>
        {% endfor %}
      </select>

      <label>Note (shared across admin accounts)</label>
      <textarea name="notes" style="min-height:160px;">{{ notes }}</textarea>

      <button type="submit" class="btn-save">💾 Save Note</button>
    </form>
  </div>
</main>
{% endblock %}