{% extends "base.html" %}
{% block title %}Revision Due — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🗓️ Revision Due</h1>
  <div><a href="{{ url_for('revision_log') }}">Revision Log</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% include "_revision_log_banner.html" %}
  <div class="card">
    <p style="font-size:13px; color:#566573; margin:0;">
      Only available in Sura-based mode. Suras never revised, or revised longest ago, appear first.
    </p>
  </div>

  {% if not suras %}
    <div class="card"><p>No memorized/in-progress suras yet, or you're not in Sura-based mode.</p></div>
  {% endif %}

  {% for s in suras %}
  <div class="card" style="{% if s.overdue %}background:#fdedec;{% endif %}">
    <div style="font-weight:bold; color:#1a3a5c;">{{ s.sura_no }}. {{ s.sura_name }} — {{ s.verse_detail }}</div>
    <div style="font-size:13px; color:#566573;">
      Last revised: {{ (s.last_revised | fmt_date) if s.last_revised else "Never" }}
      {% if s.days_since is not none %} &middot; {{ s.days_since }} days ago{% endif %}
      {% if s.overdue %} &middot; <span style="color:#a93226; font-weight:bold;">Overdue</span>{% endif %}
    </div>
  </div>
  {% endfor %}
</main>
{% endblock %}