{% extends "base.html" %}
{% block title %}All FSR Lessons — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📋 All FSR Lessons</h1>
  <div><a href="{{ url_for('fsr_new_lesson') }}">+ New Lesson</a> &nbsp;·&nbsp; <a href="{{ url_for('fsr_checkin') }}">Check-In</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card">
    <label>Filter</label>
    <select onchange="window.location.href='/fsr/lessons?filter=' + encodeURIComponent(this.value)">
      {% for f in filters %}
      <option value="{{ f }}" {% if f == filter_key %}selected{% endif %}>{{ f }}</option>
      {% endfor %}
    </select>
    <p style="font-size:12px; color:#7f8c8d; margin:4px 0 0;">{{ lessons | length }} lesson(s) match this filter.</p>
  </div>

  {% if not lessons %}
    <div class="card"><p>No lessons match this filter.</p></div>
  {% endif %}

  {% for l in lessons %}
  <div class="card" style="{% if l.find_done == 'Yes' and l.study_done == 'Yes' and l.reflect_done == 'Yes' %}background:#eafaf1;{% endif %}">
    <div style="display:flex; justify-content:space-between;">
      <div>
        <strong>{{ l.title }}</strong>
        <div style="font-size:12px; color:#566573;">
          {{ l.lesson_type }}
          {% if l.anchor_ref %} &middot; {{ l.anchor_ref }}{% endif %}
          {% if l.priority == "High" %} &middot; <span style="color:#a93226; font-weight:bold;">High Priority</span>{% endif %}
          {% if l.notify_me == "Yes" %} &middot; 🔔{% endif %}
        </div>
        <div style="font-size:12px; margin-top:4px;">
          🔍 {{ "✅" if l.find_done == "Yes" else "⬜" }} &nbsp;
          📖 {{ "✅" if l.study_done == "Yes" else "⬜" }} &nbsp;
          💭 {{ "✅" if l.reflect_done == "Yes" else "⬜" }}
        </div>
      </div>
      <div><a href="/fsr/{{ l.id }}" style="font-size:12px; margin-right:8px;">View</a><a href="/fsr/{{ l.id }}/edit" style="font-size:12px;">Edit</a></div>
    </div>
  </div>
  {% endfor %}
</main>
{% endblock %}