{% extends "base.html" %}
{% block title %}{{ sura.name_english }} — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📖 {{ sura.name_english }}</h1>
  <div><a href="{{ url_for('suras_browse') }}">Browse Suras</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card" style="background:#eaf2fb;">
    <div style="font-size:28px; text-align:right;">{{ sura.name_arabic }}</div>
    {% if sura.other_names %}<div style="font-size:12px; color:#566573;">Also known as: {{ sura.other_names }}</div>{% endif %}
  </div>

  <div class="card" style="display:flex; flex-wrap:wrap; gap:12px;">
    <div style="flex:1; min-width:100px;">
      <div style="font-size:12px; color:#566573;">Sura No.</div>
      <div style="font-size:18px; font-weight:bold;">{{ sura.sura_no }}</div>
    </div>
    <div style="flex:1; min-width:100px;">
      <div style="font-size:12px; color:#566573;">Verses</div>
      <div style="font-size:18px; font-weight:bold;">{{ sura.total_verses }}</div>
    </div>
    <div style="flex:1; min-width:100px;">
      <div style="font-size:12px; color:#566573;">Ruku</div>
      <div style="font-size:18px; font-weight:bold;">{{ sura.total_ruku }}</div>
    </div>
    <div style="flex:1; min-width:100px;">
      <div style="font-size:12px; color:#566573;">Revealed</div>
      <div style="font-size:18px; font-weight:bold;">{{ sura.revealed_in }}</div>
    </div>
  </div>

  <div class="card">
    <div class="section-title">Location</div>
    <p style="font-size:14px;">
      Juz {{ sura.juz_numbers }}{% if sura.is_multi_juz == "Yes" %} (spans multiple Juz){% endif %}<br>
      Pages {{ sura.page_from }}–{{ sura.page_to }}
    </p>
  </div>

  <div class="card">
    <a class="btn" style="background:#6c3483; display:inline-block; text-decoration:none;" href="/memorization?sura_no={{ sura.sura_no }}">
      📿 Manage My Memorization for This Sura
    </a>
  </div>
</main>
{% endblock %}