{% extends "base.html" %}
{% block title %}Today's Plan — {{ today }} — IslamInLife Quran App{% endblock %}
{% block body %}
<style>
  @media print {
    header, .no-print { display: none !important; }
    body { background: white; }
    .card { box-shadow: none; border: 1px solid #ccc; }
  }
</style>
<header>
  <h1>📿 Today's Plan</h1>
  <div>{{ today }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card no-print">
    <button class="btn" style="background:#1a5276;" onclick="window.print()">🖨️ Print</button>
  </div>

  {% set any_items = sections | selectattr("rows") | list %}
  {% if not any_items and not notes %}
    <div class="card"><p>No plan has been made for today yet.</p></div>
  {% endif %}

  {% for s in sections %}
    {% if s.rows %}
    <div class="card {{ s.key }}">
      <div class="section-title">{{ s.icon }} {{ s.title }}</div>
      <table>
        <tr>
          <th>Sura</th><th>Verses</th>{% if s.key == "visual" %}<th>Page</th>{% endif %}<th>Status</th>
        </tr>
        {% for r in s.rows %}
        <tr>
          <td data-label="Sura">{{ r.sura_label }}</td>
          <td data-label="Verses">{{ r.verses }}</td>
          {% if s.key == "visual" %}<td data-label="Page">{{ r.page or "—" }}</td>{% endif %}
          <td data-label="Status">{{ "✅ Done" if r.done else "⬜ Not yet" }}</td>
        </tr>
        {% endfor %}
      </table>
    </div>
    {% endif %}
  {% endfor %}

  {% if notes %}
  <div class="card">
    <div class="section-title">📝 Notes</div>
    <p style="white-space:pre-wrap;">{{ notes }}</p>
  </div>
  {% endif %}
</main>
{% endblock %}