{% extends "base.html" %}
{% block title %}Search Tafseer — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🔍 Search Tafseer</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">
    <p style="font-size:13px; color:#566573; margin-top:0;">
      Find where a sura (and optionally a specific verse) is located across your selected tafseer books.
    </p>
    <form method="post">
      <label>Sura</label>
      <select name="sura_no">
        {% for s in suras %}
        <option value="{{ s.sura_no }}" {% if s.sura_no == selected_sura_no %}selected{% endif %}>{{ s.label }}</option>
        {% endfor %}
      </select>

      <label>Verse (optional)</label>
      <input type="text" name="verse_no" value="{{ selected_verse_no }}" placeholder="leave blank for the whole sura">

      <label>Books to search</label>
      {% for b in books %}
      <div class="done-check">
        <input type="checkbox" name="book_ids" value="{{ b.id }}" id="book_{{ b.id }}"
               {% if b.id in selected_book_ids %}checked{% endif %}>
        <label for="book_{{ b.id }}" style="margin:0;">{{ b.book_name }}</label>
      </div>
      {% endfor %}

      <button type="submit" class="btn-save" style="margin-top:12px;">🔍 Find</button>
    </form>
  </div>

  {% if query_desc %}
  <div class="card" style="background:#eaf2fb;">
    <strong>{{ query_desc }}</strong>
  </div>
  {% endif %}

  {% if results %}
    {% for r in results %}
    <div class="card">
      <div style="font-weight:bold; color:#5b2c6f;">{{ r.book_name }}</div>
      <div style="font-size:14px; margin-top:4px;">{{ r.location }}</div>
    </div>
    {% endfor %}
  {% endif %}
</main>
{% endblock %}