{% extends "base.html" %}
{% block title %}{{ lesson.title }} — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🔍📖💭 Lesson Detail</h1>
  <div><a href="{{ url_for('fsr_edit_lesson', lesson_id=lesson.id) }}">Edit</a> &nbsp;·&nbsp; <a href="{{ url_for('fsr_checkin') }}">FSR Check-In</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card">
    <div style="font-weight:bold; font-size:18px; color:#1a3a5c;">{{ lesson.title }}</div>
    <div style="font-size:13px; color:#566573; margin-top:4px;">
      {{ lesson.lesson_type }} &middot; Priority: {{ lesson.priority }}
      {% if lesson.notify_me == "Yes" %} &middot; 🔔 Notify On{% endif %}
    </div>
    {% if lesson.anchor_ref %}<div style="font-size:13px; margin-top:6px;"><strong>Reference:</strong> {{ lesson.anchor_ref }}</div>{% endif %}
    {% if sura_name %}<div style="font-size:13px;"><strong>Linked Sura:</strong> {{ sura_name }}</div>{% endif %}
    {% if lesson.description %}<div style="font-size:13px; margin-top:8px;"><strong>Description:</strong><br>{{ lesson.description }}</div>{% endif %}
    {% if lesson.source_hint %}<div style="font-size:13px; margin-top:8px;"><strong>Where to Look:</strong> {{ lesson.source_hint }}</div>{% endif %}
  </div>

  {% if lesson.bases %}
  <div class="card">
    <div class="section-title">Learning Bases</div>
    {% for b in lesson.bases %}
    <div style="font-size:13px; padding:4px 0;">{{ b.basis_name }}{% if b.ref_detail %} — {{ b.ref_detail }}{% endif %}</div>
    {% endfor %}
  </div>
  {% endif %}

  <div class="card" style="{% if lesson.find_done == 'Yes' %}background:#eafaf1;{% endif %}">
    <div class="section-title">🔍 Find — {{ "Done" if lesson.find_done == "Yes" else "Pending" }}</div>
    {% if lesson.find_notes %}<div style="font-size:13px;">{{ lesson.find_notes }}</div>{% endif %}
  </div>
  <div class="card" style="{% if lesson.study_done == 'Yes' %}background:#eafaf1;{% endif %}">
    <div class="section-title">📖 Study — {{ "Done" if lesson.study_done == "Yes" else "Pending" }}</div>
    {% if lesson.study_notes %}<div style="font-size:13px;">{{ lesson.study_notes }}</div>{% endif %}
  </div>
  <div class="card" style="{% if lesson.reflect_done == 'Yes' %}background:#eafaf1;{% endif %}">
    <div class="section-title">💭 Reflect — {{ "Done" if lesson.reflect_done == "Yes" else "Pending" }}</div>
    {% if lesson.reflect_notes %}<div style="font-size:13px;">{{ lesson.reflect_notes }}</div>{% endif %}
  </div>
</main>
{% endblock %}