{% extends "base.html" %}
{% block title %}Revision Summary — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📊 Revision Summary</h1>
  <div><a href="{{ url_for('revision_log') }}">Revision Log</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card" style="background:#eaf2fb;">
    <p style="font-size:13px; color:#566573; margin:0;">Mode: <strong>{{ mode | capitalize }}-based</strong></p>
  </div>

  <div class="card" style="display:flex; flex-wrap:wrap; gap:12px;">
    <div style="flex:1; min-width:110px;">
      <div style="font-size:12px; color:#566573;">Total Sessions</div>
      <div style="font-size:20px; font-weight:bold; color:#1a5276;">{{ stats.total }}</div>
    </div>
    <div style="flex:1; min-width:110px;">
      <div style="font-size:12px; color:#566573;">Total Revised</div>
      <div style="font-size:20px; font-weight:bold; color:#1a7a4a;">{{ stats.total_revised_count }}</div>
    </div>
    <div style="flex:1; min-width:110px;">
      <div style="font-size:12px; color:#566573;">Today</div>
      <div style="font-size:20px; font-weight:bold; color:#6c3483;">{{ stats.today }}</div>
    </div>
    <div style="flex:1; min-width:110px;">
      <div style="font-size:12px; color:#566573;">This Month</div>
      <div style="font-size:20px; font-weight:bold; color:#a04000;">{{ stats.this_month }}</div>
    </div>
  </div>

  {% if breakdown %}
  <div class="card">
    <div class="section-title">Breakdown</div>
    <table>
      {% if mode == "page" %}
        <tr><th>Page</th><th>Sessions</th></tr>
        {% for b in breakdown %}<tr><td data-label="Page">{{ b.page_no }}</td><td data-label="Sessions">{{ b.sessions }}</td></tr>{% endfor %}
      {% else %}
        <tr><th>Sura</th><th>Verses</th><th>Sessions</th></tr>
        {% for b in breakdown %}<tr><td data-label="Sura">{{ b.sura_name }}</td><td data-label="Verses">{{ b.verse_no }}{% if b.verse_no_end %}-{{ b.verse_no_end }}{% endif %}</td><td data-label="Sessions">{{ b.sessions }}</td></tr>{% endfor %}
      {% endif %}
    </table>
  </div>
  {% endif %}
</main>
{% endblock %}