{% extends "base.html" %}
{% block title %}Memorization Plans — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🗓️ Memorization Plans</h1>
  <div><a href="{{ url_for('memorization_planning') }}">Manage Plans</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:110px;">
      <div style="font-size:12px; color:#566573;">Total Plans</div>
      <div style="font-size:22px; font-weight:bold; color:#1a3a5c;">{{ total_count }}</div>
    </div>
    <div style="flex:1; min-width:110px;">
      <div style="font-size:12px; color:#566573;">Pending</div>
      <div style="font-size:22px; font-weight:bold; color:#a04000;">{{ pending_count }}</div>
    </div>
    <div style="flex:1; min-width:110px;">
      <div style="font-size:12px; color:#566573;">Done</div>
      <div style="font-size:22px; font-weight:bold; color:#1a7a4a;">{{ done_count }}</div>
    </div>
    <div style="flex:1; min-width:110px;">
      <div style="font-size:12px; color:#566573;">Missed</div>
      <div style="font-size:22px; font-weight:bold; color:#a93226;">{{ missed_count }}</div>
    </div>
  </div>

  <div class="card">
    <div class="section-title">All Plans</div>
    {% if not rows %}
      <p style="font-size:14px; color:#566573;">You haven't created any memorization plans yet. <a href="{{ url_for('memorization_planning') }}">Create one</a> to get started.</p>
    {% else %}
    <table>
      <tr>
        <th>#</th>
        <th>Sura / Verses</th>
        <th>Plan Type</th>
        <th>Date From → To</th>
        <th>Days</th>
        <th>Days Remaining</th>
        <th>Status</th>
        <th>Notes</th>
      </tr>
      {% for r in rows %}
      <tr>
        <td data-label="#">{{ r.no }}</td>
        <td data-label="Sura / Verses"><strong>{{ r.sura_no }}. {{ r.sura_name }}</strong> — {{ r.verse_detail }}</td>
        <td data-label="Plan Type">{{ r.plan_type }}</td>
        <td data-label="Date From → To">{{ r.date_from | fmt_date }} → {{ r.date_to | fmt_date }}</td>
        <td data-label="Days">{{ r.duration_days if r.duration_days is not none else '—' }}</td>
        <td data-label="Days Remaining">
          {% if r.days_remaining is not none %}
            <span style="{% if r.days_remaining < 0 %}color:#a93226;{% elif r.days_remaining <= 2 %}color:#e67e22;{% else %}color:#566573;{% endif %} font-weight:bold;">{{ r.days_remaining | days_remaining_text }}</span>
          {% else %}
            —
          {% endif %}
        </td>
        <td data-label="Status">
          {% if r.status == 'Done' %}
            <span style="color:#1a7a4a; font-weight:bold;">✅ Done</span>
          {% elif r.status == 'Missed' %}
            <span style="color:#a93226; font-weight:bold;">❌ Missed</span>
          {% else %}
            <span style="color:#a04000; font-weight:bold;">⏳ Pending</span>
          {% endif %}
          {% if r.linked %}<div style="font-size:11px; color:#566573;">🔗 Linked to Entry Form</div>{% endif %}
        </td>
        <td data-label="Notes">{{ r.notes or '—' }}</td>
      </tr>
      {% endfor %}
    </table>
    {% endif %}
  </div>
</main>
{% endblock %}