{% extends "base.html" %}
{% block title %}My Memo Sequence — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📜 My Memo Sequence</h1>
  <div><a href="{{ url_for('memorization') }}">Entry Form</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card">
    <label>
      <input type="checkbox" {% if include_in_progress %}checked{% endif %}
             onchange="window.location.href='/memorization/sequence' + (this.checked ? '?include_in_progress=1' : '')">
      Include In Progress suras (not just fully Memorized)
    </label>
  </div>

  {% if not rows %}
    <div class="card"><p>Nothing to show yet.</p></div>
  {% endif %}

  {% for r in rows %}
  <div class="card" style="{% if r.is_complete %}background:#eafaf1;{% endif %}">
    <div style="display:flex; justify-content:space-between; align-items:center;">
      <div>
        <strong>{{ r.sura_no }}. {{ r.name_english }}</strong>
        <div style="font-size:12px; color:#566573;">
          {{ r.verses_display }} &middot; Pages {{ r.pages }} &middot; {{ r.statuses | join(", ") }}
        </div>
      </div>
      <div style="font-size:18px;">{{ r.name_arabic }}</div>
    </div>
  </div>
  {% endfor %}
</main>
{% endblock %}