{% extends "base.html" %}
{% block title %}Learn Sura Sequence — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🎯 Learn Sura Sequence</h1>
  <div><a href="{{ url_for('lss_quiz') }}">General Quiz</a> &nbsp;·&nbsp; <a href="{{ url_for('lss_hifz_quiz') }}">Hifz Quiz</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card">
    <div class="section-title">📖 Sura Sequence Window</div>
    <p style="font-size:13px; color:#566573;">
      A random window of {{ window | length }} consecutive suras (Sura {{ window[0].sura_no }} to {{ window[-1].sura_no }}).
    </p>
    <div style="display:flex; align-items:center; gap:6px; overflow-x:auto; padding:8px 0;">
      {% for s in window %}
      <div style="background:#e8f8f5; border:1px solid #a9dfbf; border-radius:8px; padding:10px; text-align:center; min-width:90px;">
        <div style="font-size:11px; color:#555;">Sura {{ s.sura_no }}</div>
        <div style="font-size:13px; font-weight:bold; color:#0e6655;">{{ s.name_english }}</div>
        <div style="font-size:16px;">{{ s.name_arabic }}</div>
      </div>
      {% if not loop.last %}<div style="font-size:18px; color:#148f77;">→</div>{% endif %}
      {% endfor %}
    </div>
    <a class="btn" style="background:#148f77; display:inline-block; text-decoration:none;" href="{{ url_for('lss_home') }}">
      🔀 Shuffle Window
    </a>
  </div>

  <div class="card" style="background:#eaf2fb;">
    <div class="section-title">📊 My Progress</div>
    <p style="font-size:13px;">
      General Quiz: {{ progress.general.correct }} correct, {{ progress.general.wrong }} wrong
      ({{ progress.general.total }} total)
    </p>
    <p style="font-size:13px;">
      Hifz Quiz: {{ progress.hifz.correct }} correct, {{ progress.hifz.wrong }} wrong
      ({{ progress.hifz.total }} total)
    </p>
    {% if progress.leader %}
    <p style="font-size:13px; color:#566573;">
      Top scorer overall: {{ progress.leader.name }} ({{ progress.leader.correct }} correct)
    </p>
    {% endif %}
  </div>

  <div class="card">
    <a class="btn btn-save" style="display:inline-block; text-decoration:none;" href="{{ url_for('lss_quiz') }}">
      🎯 Take the General Sura Sequence Quiz
    </a>
  </div>
</main>
{% endblock %}