{% extends "base.html" %}
{% block title %}My SSRP Plans — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🕌 My SSRP Plans</h1>
  <div><a href="{{ url_for('ssrp_new_plan') }}">+ New Plan</a> &nbsp;·&nbsp; <a href="{{ url_for('ssrp_tonight') }}">SSRP</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <p style="font-size:12px; color:#7f8c8d; margin-top:-6px;">SSRP — Salat Sura Recitation Plan</p>
  {% if not plans %}
    <div class="card"><p>No SSRP plans yet.</p></div>
  {% endif %}
  {% for p in plans %}
  <div class="card">
    <div style="display:flex; justify-content:space-between; align-items:center;">
      <div>
        <strong>{{ p.plan_name }}</strong>
        <div style="font-size:12px; color:#566573;">{{ p.type_name }} &middot; {{ p.num_rakat }} rakat</div>
      </div>
      <a href="/ssrp/{{ p.id }}/sets" style="font-size:13px; margin-right:10px;">Edit Sets</a>
      <a href="{{ url_for('ssrp_edit_plan', plan_id=p.id) }}" style="font-size:13px; margin-right:10px;">Edit Plan</a>
      <a href="#" onclick="deletePlan({{ p.id }}, {{ p.plan_name | tojson }}); return false;" style="font-size:13px; color:#a93226;">Delete</a>
    </div>
  </div>
  {% endfor %}
</main>

<script>
function deletePlan(id, name) {
  if (!confirm(`Delete plan '${name}'? This also removes all its saved sets. This cannot be undone.`)) return;
  fetch(`/api/ssrp/${id}/delete`, { method: 'POST' })
    .then(r => r.json())
    .then(d => {
      if (d.ok) location.reload();
      else alert(d.error || 'Could not delete this plan.');
    });
}
</script>
{% endblock %}