{% extends "base.html" %}
{% block title %}Tafseer References — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📚 Tafseer References</h1>
  <div><a href="{{ url_for('tafseer_search') }}">Search</a> &nbsp;·&nbsp; <a href="{{ url_for('tafseer_books_list') }}">Manage Books</a> &nbsp;·&nbsp; <a href="{{ url_for('tafseer_notes') }}">Notes</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card">
    <label>Sura</label>
    <select onchange="window.location.href='/tafseer?sura_no=' + this.value">
      {% for s in suras %}
      <option value="{{ s.sura_no }}" {% if s.sura_no == sura_no %}selected{% endif %}>{{ s.label }}</option>
      {% endfor %}
    </select>
  </div>

  <div class="card" style="background:#eaf2fb;">
    <div style="font-weight:bold; font-size:16px; color:#1a5276;">Sura {{ sura_no }} — {{ sura_name }}</div>
  </div>

  {% if not book_entries %}
    <div class="card"><p>No tafseer entries found for this sura.</p></div>
  {% endif %}

  {% for e in book_entries %}
  <div class="card">
    <div style="font-weight:bold; color:#5b2c6f;">{{ e.book_name }}</div>
    <div style="font-size:13px; color:#566573;">Reference: {{ e.reference }}</div>
    {% if e.notes %}<div style="font-size:13px; margin-top:6px;">{{ e.notes }}</div>{% endif %}
  </div>
  {% endfor %}
</main>
{% endblock %}