{% extends "base.html" %}
{% block title %}মুখস্থকরণ পরিকল্পনা — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}
{% block body %}
<header>
  <h1>🗓️ মুখস্থকরণ পরিকল্পনা</h1>
  <div><a href="{{ url_for('memorization_planning') }}">পরিকল্পনা পরিচালনা করুন</a> &nbsp;·&nbsp; <a href="{{ url_for('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;">মোট পরিকল্পনা</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;">অপেক্ষমাণ</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;">সম্পন্ন</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;">মিস হয়েছে</div>
      <div style="font-size:22px; font-weight:bold; color:#a93226;">{{ missed_count }}</div>
    </div>
  </div>

  <div class="card">
    <div class="section-title">সকল পরিকল্পনা</div>
    {% if not rows %}
      <p style="font-size:14px; color:#566573;">আপনি এখনও কোনো মুখস্থকরণ পরিকল্পনা তৈরি করেননি। শুরু করতে <a href="{{ url_for('memorization_planning') }}">একটি তৈরি করুন</a>।</p>
    {% else %}
    <table>
      <tr>
        <th>#</th>
        <th>সূরা / আয়াত</th>
        <th>পরিকল্পনার ধরন</th>
        <th>তারিখ থেকে → পর্যন্ত</th>
        <th>দিন</th>
        <th>বাকি দিন</th>
        <th>অবস্থা</th>
        <th>নোট</th>
      </tr>
      {% for r in rows %}
      <tr>
        <td data-label="#">{{ r.no }}</td>
        <td data-label="সূরা / আয়াত"><strong>{{ r.sura_no }}. {{ r.sura_name }}</strong> — {{ r.verse_detail }}</td>
        <td data-label="পরিকল্পনার ধরন">{{ r.plan_type | bn_status }}</td>
        <td data-label="তারিখ থেকে → পর্যন্ত">{{ r.date_from | fmt_date }} → {{ r.date_to | fmt_date }}</td>
        <td data-label="দিন">{{ r.duration_days if r.duration_days is not none else '—' }}</td>
        <td data-label="বাকি দিন">
          {% 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="অবস্থা">
          {% if r.status == 'Done' %}
            <span style="color:#1a7a4a; font-weight:bold;">✅ সম্পন্ন</span>
          {% elif r.status == 'Missed' %}
            <span style="color:#a93226; font-weight:bold;">❌ মিস হয়েছে</span>
          {% else %}
            <span style="color:#a04000; font-weight:bold;">⏳ অপেক্ষমাণ</span>
          {% endif %}
          {% if r.linked %}<div style="font-size:11px; color:#566573;">🔗 এন্ট্রি ফর্মের সাথে লিংক করা</div>{% endif %}
        </td>
        <td data-label="নোট">{{ r.notes or '—' }}</td>
      </tr>
      {% endfor %}
    </table>
    {% endif %}
  </div>
</main>
{% endblock %}