{% extends "base.html" %}
{% block title %}SMGP — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🎯 Special Memo Goal Plans</h1>
  <div><a href="{{ url_for('smgp_new_plan') }}">+ New Plan</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if not plans %}
    <div class="card"><p>No active goal plans. Create one in the desktop app to track it here.</p></div>
  {% endif %}
  {% for plan, total, done, pct in plans %}
  <div class="card">
    <div style="font-weight:bold; color:#1a3a5c; font-size:16px;">{{ plan.plan_name }}</div>
    {% if plan.occasion %}<div style="font-size:13px; color:#566573;">{{ plan.occasion }}</div>{% endif %}
    <div style="font-size:13px; color:#566573; margin:6px 0;">{{ done }}/{{ total }} items memorized ({{ pct }}%)</div>
    <a class="btn" style="background:#6c3483; display:inline-block; text-decoration:none;" href="{{ url_for('smgp_detail', plan_id=plan.id) }}">
      Open Plan
    </a>
  </div>
  {% endfor %}
</main>
{% endblock %}