{% extends "index.html" %}

{% block topbar_left_extra %}
<span class="app-name-text">ThirtyTutors</span>
{% endblock %}

{% block title %}Test Yourself - ThirtyTutors AI{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/UI/styles/sidebar.css?v=1" />
<link rel="stylesheet" href="/UI/styles/modals.css?v=1" />
<link rel="stylesheet" href="/UI/styles/quiz_drawer.css?v=1" />
<link rel="stylesheet" href="/UI/styles/quiz_mode.css?v=1" />
{% endblock %}

{% block content %}
<div id="quizModeWrap">
  <!-- Intro screen - always shown first, every visit (never lands
       directly on a slide). The range select lives in the header,
       outside quizModeEmptyState/quizModeReadyState, so it's always
       reachable regardless of which of those two is currently showing -
       switching to a range with zero items must never strand the person
       on the empty state with no way back to a range that has content. -->
  <div id="quizModeIntro" class="quiz-mode-card">
    <div id="quizModeIntroHeader">
      <h1 class="quiz-mode-title">Test Yourself</h1>
      <select id="quizModeRangeSelect">
        <option value="all">All time</option>
        <option value="today">Today</option>
        <option value="week">Last 7 days</option>
        <option value="month">Last 30 days</option>
      </select>
    </div>

    <p id="quizModeLoading" class="field-hint">Loading...</p>

    <div id="quizModeEmptyState" style="display:none;">
      <p id="quizModeEmptyMessage" class="field-hint"></p>
    </div>

    <div id="quizModeReadyState" style="display:none;">
      <p class="field-hint">Every word and phrase the tutor has already quizzed you on in this conversation, replayed as one quick round - a fast way to check what's actually sticking.</p>
      <p id="quizModeCount" class="field-hint"></p>
      <button id="quizModeStartBtn" class="primary-btn" type="button" style="width:100%; margin-top:8px;">Start Quiz</button>
    </div>

    <div class="quiz-mode-footer-row">
      <button id="quizModeIntroCloseBtn" class="secondary-btn" type="button">Close</button>
    </div>
  </div>

  <!-- Quiz-in-progress screen - same chrome shape as the learning page's
       quiz drawer (quiz_drawer.css classes reused throughout) but a
       standalone full-page layout, since there's no avatar drawer/live
       session alongside it here. Hidden until Start is clicked. -->
  <div id="quizModeSession" class="quiz-mode-card" style="display:none;">
    <div id="quizModeHeader">
      <div class="quiz-progress-row">
        <div class="quiz-progress-left">
          <button id="quizModeBackBtn" class="quiz-skip-btn" type="button" style="display:none;">&lsaquo; Back</button>
          <span id="quizModeProgressLabel" class="quiz-progress-label"></span>
        </div>
      </div>
      <div class="quiz-progress-track">
        <div id="quizModeProgressFill" class="quiz-progress-fill" style="width:0%;"></div>
      </div>
    </div>

    <div id="quizModeBody">
      <div id="quizModeSlide"></div>
    </div>

    <div id="quizModeFooter">
      <button id="quizModeRedoBtn" class="pill-btn" type="button" style="display:none;">Redo</button>
      <button id="quizModeNextBtn" class="primary-btn" type="button" disabled>Next</button>
    </div>
    <div class="quiz-mode-footer-row">
      <button id="quizModeSessionCloseBtn" class="secondary-btn" type="button">Close</button>
    </div>

    <div
      id="quizModeAnnounce"
      style="position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;"
      aria-live="polite"
    ></div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/UI/scripts/quiz/quizRenderers.js?v=1"></script>
<script src="/UI/scripts/quiz/quizDragDrop.js?v=1"></script>
<script src="/UI/scripts/quiz/quizMode.js?v=1"></script>
{% endblock %}