{% extends "base.html" %}
{% block title %}{{ "Edit" if lesson else "New" }} FSR Lesson — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>{{ "✏️ Edit" if lesson else "➕ New" }} FSR Lesson</h1>
  <div><a href="{{ url_for('fsr_checkin') }}">FSR Check-In</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if error %}<div class="msg msg-error">{{ error }}</div>{% endif %}

  {% if not lesson_types %}
  <div class="msg msg-error">
    No Lesson Types exist yet, so this form can't be saved —
    <a href="{{ url_for('fsr_lesson_types') }}" style="color:#922b21; text-decoration:underline; font-weight:bold;">add one here first</a>,
    then come back to this page.
  </div>
  {% endif %}

  <div class="card">
    <form method="post">
      <label>Title *</label>
      <input type="text" name="title" value="{{ lesson.title if lesson else '' }}" required>

      <label>Lesson Type *</label>
      <select name="lesson_type" {% if not lesson_types %}disabled{% endif %}>
        {% for lt in lesson_types %}
        <option value="{{ lt.name }}" {% if lesson and lesson.lesson_type == lt.name %}selected{% endif %}>{{ lt.name }}</option>
        {% endfor %}
      </select>

      <div class="row">
        <div>
          <label>Priority</label>
          <select name="priority">
            <option {% if lesson and lesson.priority == "High" %}selected{% endif %}>High</option>
            <option {% if not lesson or lesson.priority == "Normal" %}selected{% endif %}>Normal</option>
            <option {% if lesson and lesson.priority == "Low" %}selected{% endif %}>Low</option>
          </select>
        </div>
        <div class="done-check" style="margin-top:22px;">
          <input type="checkbox" name="notify_me" value="1" id="notifyMe" {% if lesson and lesson.notify_me == "Yes" %}checked{% endif %}>
          <label for="notifyMe">Notify Me</label>
        </div>
      </div>

      <label>Reference (Ayah / Hadith / Book)</label>
      <input type="text" name="anchor_ref" value="{{ lesson.anchor_ref if lesson else '' }}" placeholder="e.g. Al-Imran 3:159">

      <label>Link to Sura (optional)</label>
      <select name="sura_no">
        <option value="">— None —</option>
        {% for s in suras %}
        <option value="{{ s.sura_no }}" {% if lesson and lesson.sura_no == s.sura_no %}selected{% endif %}>{{ s.label }}</option>
        {% endfor %}
      </select>

      <label>Description / Core Question</label>
      <textarea name="description">{{ lesson.description if lesson else '' }}</textarea>

      <label>Where to Look (source hint)</label>
      <input type="text" name="source_hint" value="{{ lesson.source_hint if lesson else '' }}">

      <div class="section-title" style="margin-top:16px;">Learning Basis (optional)</div>
      <div class="row">
        <div>
          <label>Type</label>
          <select name="basis_type_id">
            <option value="">— None —</option>
            {% for bt in basis_types %}<option value="{{ bt.id }}">{{ bt.name }}</option>{% endfor %}
          </select>
        </div>
        <div>
          <label>Reference Detail</label>
          <input type="text" name="basis_ref" placeholder="optional">
        </div>
      </div>
      <p style="font-size:11px; color:#7f8c8d; margin-top:-4px;">
        One basis can be added here; use the desktop app to attach multiple.
      </p>

      <div class="section-title" style="margin-top:16px;">Tags (optional)</div>
      {% if not all_tags %}
        <p style="font-size:12px; color:#7f8c8d;">No tags exist yet — add some on the Tags page first.</p>
      {% else %}
      <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;">
        {% for t in all_tags %}
        <label style="font-weight:normal; display:flex; align-items:center; gap:4px; white-space:nowrap;">
          <input type="checkbox" name="tag_ids" value="{{ t.id }}" {% if t.id in selected_tag_ids %}checked{% endif %}>
          {{ t.tag_name }}
        </label>
        {% endfor %}
      </div>
      {% endif %}

      <button type="submit" class="btn-save" style="margin-top:12px;">💾 Save Lesson</button>
    </form>
  </div>
</main>
{% endblock %}