{% extends "base.html" %}
{% block title %}Memorized & In-progress — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📈 Memorized &amp; In-progress</h1>
  <div><a href="{{ url_for('memorization') }}">Entry Form</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">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;">Started</div>
      <div style="font-size:20px; font-weight:bold; color:#2471a3;">{{ started }}</div>
      <div style="font-size:11px; color:#7f8c8d;">suras in progress</div>
    </div>
    <div style="flex:1; min-width:120px;">
      <div style="font-size:12px; color:#566573;">Fully Memorized</div>
      <div style="font-size:20px; font-weight:bold; color:#1a5c2e;">{{ fully_done }}</div>
      <div style="font-size:11px; color:#7f8c8d;">complete suras</div>
    </div>
    <div style="flex:1; min-width:120px;">
      <div style="font-size:12px; color:#566573;">Verses Memorized</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 }}% of Quran</div>
    </div>
  </div>

  <div class="card">
    <div class="section-title">All Sura Overview</div>
    <table>
      <tr><th>#</th><th>Sura</th><th>Memorized</th><th>In-progress</th><th>Entries</th></tr>
      {% for r in rows %}
      <tr>
        <td data-label="#">{{ r.sura_no }}</td>
        <td data-label="Sura">{{ r.name }}</td>
        <td data-label="Memorized">{{ r.memorized_count }}/{{ r.total_verses }} ({{ r.memorized_percent }}%)</td>
        <td data-label="In-progress">{{ r.progress_count }}/{{ r.total_verses }} ({{ r.progress_percent }}%)</td>
        <td data-label="Entries">{{ r.entry_count }}</td>
      </tr>
      {% endfor %}
    </table>
  </div>
</main>
{% endblock %}