{% extends "base.html" %}
{% block title %}{{ sura.name_english if sura else "Sura" }} — Quran Viewer — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📜 {{ sura.name_english if sura else "Sura " ~ sura_no }}</h1>
  <div><a href="{{ url_for('quran_viewer') }}">Change Sura</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if not_found %}
    <div class="card"><p>Could not find this sura in your uploaded file. The parser may not have detected its boundary correctly.</p></div>
  {% else %}
    <div class="card">
      <div style="display:flex; gap:14px; font-size:11px; flex-wrap:wrap;">
        <span>🟢 Memorized</span>
        <span>🟡 In Progress</span>
        <span>⬜ Not Recorded</span>
      </div>
    </div>

    <div class="card" style="direction:rtl; text-align:right; font-size:20px; line-height:2.2;">
      {% for v in verses %}
      <span style="
        {% if v.status == 'Memorized' %}background:#d4efdf;
        {% elif v.status == 'In Progress' %}background:#fdebd0;
        {% endif %}
        padding:2px 4px; border-radius:4px;">{{ v.text }} <small style="font-size:12px; color:#888;">({{ v.verse_no }})</small></span>
      {% endfor %}
    </div>
  {% endif %}
</main>
{% endblock %}