{% extends "base.html" %}
{% block title %}{{ sura.sura_no | bn_sura_name(sura.name_english) }} — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}
{% block body %}
<header>
  <h1>📖 {{ sura.sura_no | bn_sura_name(sura.name_english) }}</h1>
  <div><a href="{{ url_for('suras_browse') }}">সূরা ব্রাউজ করুন</a> &nbsp;·&nbsp; <a href="{{ url_for('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;">অন্য নামে পরিচিত: {{ 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;">সূরা নং</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;">আয়াত</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;">রুকু</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;">অবতীর্ণ</div>
      <div style="font-size:18px; font-weight:bold;">{{ sura.revealed_in }}</div>
    </div>
  </div>

  <div class="card">
    <div class="section-title">অবস্থান</div>
    <p style="font-size:14px;">
      পারা {{ sura.juz_numbers }}{% if sura.is_multi_juz == "Yes" %} (একাধিক পারায় বিস্তৃত){% endif %}<br>
      পৃষ্ঠা {{ 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 }}">
      📿 এই সূরার জন্য আমার মুখস্থকরণ পরিচালনা করুন
    </a>
  </div>
</main>
{% endblock %}