{% extends "base.html" %}
{% block title %}মুখস্থ ও চলমান — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}
{% block body %}
<header>
  <h1>📈 মুখস্থ ও চলমান</h1>
  <div><a href="{{ url_for('memorization') }}">এন্ট্রি ফর্ম</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">হোম</a></div>
</header>
<main>
  <div class="card" style="display:flex; flex-wrap:wrap; gap:12px;">
    <div style="flex:1; min-width:120px;">
      <div style="font-size:12px; color:#566573;">শুরু হয়েছে</div>
      <div style="font-size:20px; font-weight:bold; color:#2471a3;">{{ started }}</div>
      <div style="font-size:11px; color:#7f8c8d;">চলমান সূরা</div>
    </div>
    <div style="flex:1; min-width:120px;">
      <div style="font-size:12px; color:#566573;">সম্পূর্ণ মুখস্থ</div>
      <div style="font-size:20px; font-weight:bold; color:#1a5c2e;">{{ fully_done }}</div>
      <div style="font-size:11px; color:#7f8c8d;">সম্পূর্ণ সূরা</div>
    </div>
    <div style="flex:1; min-width:120px;">
      <div style="font-size:12px; color:#566573;">মুখস্থ করা আয়াত</div>
      <div style="font-size:20px; font-weight:bold; color:#6c3483;">{{ total_mem_v }}/{{ total_all_v }}</div>
      <div style="font-size:11px; color:#7f8c8d;">কুরআনের {{ overall_pct }}%</div>
    </div>
  </div>

  <div class="card">
    <div class="section-title">সকল সূরার সারসংক্ষেপ</div>
    <table>
      <tr><th>#</th><th>সূরা</th><th>মুখস্থ</th><th>চলমান</th><th>এন্ট্রি</th></tr>
      {% for r in rows %}
      <tr>
        <td data-label="#">{{ r.sura_no }}</td>
        <td data-label="সূরা">{{ r.name }}</td>
        <td data-label="মুখস্থ">{{ r.memorized_count }}/{{ r.total_verses }} ({{ r.memorized_percent }}%)</td>
        <td data-label="চলমান">{{ r.progress_count }}/{{ r.total_verses }} ({{ r.progress_percent }}%)</td>
        <td data-label="এন্ট্রি">{{ r.entry_count }}</td>
      </tr>
      {% endfor %}
    </table>
  </div>
</main>
{% endblock %}