{% extends "base.html" %}
{% block title %}Révision · Sabaidee{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <span class="eyebrow">ທົບທວນ</span>
    <h1>Révision active</h1>
    <p>Varie les mots, choisis le sens de révision et le niveau de maîtrise maximal.</p>
  </div>
</div>

<section class="review-settings card">
  <div class="review-mode-group">
    <button class="chip active" data-mode="fr_to_pinyin">Français → Transcription</button>
    <button class="chip" data-mode="pinyin_to_fr">Transcription → Français</button>
    <button class="chip" data-mode="chinese_to_fr">Écriture lao + transcription → Français</button>
  </div>
  <div class="threshold-control">
    <div class="threshold-head">
      <b>Réviser les mots maîtrisés à moins de <span id="thresholdValue">70%</span></b>
      <small id="eligibleCount"></small>
    </div>
    <input id="masteryThreshold" type="range" min="10" max="100" step="5" value="70">
    <div class="range-labels"><span>10%</span><span>50%</span><span>100% · tous les mots</span></div>
  </div>
</section>

<section class="review-shell">
  <div class="flashcard" id="flashcard">
    <span class="eyebrow">QUESTION</span>
    <div id="prompt" class="review-prompt">Chargement…</div>
    <div id="subPrompt" class="review-sub"></div>
    <form id="reviewForm">
      <input id="answer" class="review-input" autocomplete="off" placeholder="Ta réponse…" autofocus>
      <button class="btn primary" type="submit">Valider</button>
    </form>
    <div id="reviewResult" class="review-result"></div>
  </div>
</section>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/review.js') }}"></script>
{% endblock %}