{% extends "base.html" %}
{% block title %}QCP Completion History — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🌟 Completion History</h1>
  <div><a href="{{ url_for('qcp_checkin') }}">Check-In</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card" style="background:#eaf2fb;">
    <div style="font-size:20px; font-weight:bold; color:#1a5276;">{{ khatm_count }}</div>
    <div style="font-size:12px; color:#566573;">total completions (Khatms)</div>
  </div>

  {% if not completed %}
    <div class="card"><p>No completed plans yet.</p></div>
  {% endif %}

  {% for p in completed %}
  <div class="card">
    <div style="font-weight:bold; color:#1a3a5c;">
      {% if p.khatm_number %}Khatm #{{ p.khatm_number }}{% else %}Completed Plan{% endif %}
    </div>
    <div style="font-size:13px; color:#566573;">
      Started {{ p.start_date }} &middot; Completed {{ p.completed_at }} &middot; {{ p.daily_pages }} pages/day
    </div>
  </div>
  {% endfor %}
</main>
{% endblock %}