{% extends "base.html" %}
{% block title %}Прохождение теста{% endblock %}

{% block content %}
<div class="attempt-root test-detail-page" id="attempt-root" data-test-id="{{ test_id }}" data-attempt-id="{{ attempt_id }}">

  <a href="{{ url_for('tests.tests_list_page') }}" class="link-back attempt-back-link">← К тестам</a>

  <div id="attempt-flow" class="attempt-flow">
    <header class="attempt-progress-head">
      <div class="attempt-progress-row">
        <span id="attempt-progress-label" class="attempt-progress-label" aria-live="polite">—</span>
        <span id="attempt-timer" class="attempt-timer" style="display:none;" aria-live="polite"></span>
      </div>
      <div class="attempt-progress-track"
           role="progressbar"
           aria-valuemin="1"
           aria-valuenow="1"
           aria-valuemax="1"
           aria-label="Прогресс прохождения">
        <div id="attempt-progress-fill" class="attempt-progress-fill"></div>
      </div>
      <h1 class="attempt-title font-headline" id="attempt-title">Загрузка…</h1>
      <p class="attempt-subtitle muted text-sm" id="attempt-subtitle"></p>
    </header>

    <div id="attempt-stage" class="attempt-stage"></div>

    <footer class="attempt-footer-bar" aria-label="Навигация по вопросам">
      <div class="attempt-footer-inner">
        <button type="button" class="btn btn-ghost attempt-footer-btn" id="attempt-prev" hidden>Назад</button>
        <div class="attempt-footer-spacer"></div>
        <button type="button" class="btn btn-primary attempt-footer-btn" id="attempt-next">Далее</button>
        <button type="button" class="btn btn-primary attempt-footer-btn" id="attempt-finish" style="display:none;">Завершить тест</button>
      </div>
    </footer>
  </div>

  <p id="attempt-error" class="callout callout--error attempt-error-box" style="display:none;"></p>

  <div id="attempt-result" class="surface-card attempt-result-card" style="display:none;"></div>

  <dialog id="hint-modal" class="save-modal attempt-hint-dialog">
    <div class="save-modal__inner attempt-hint-inner">
      <h3 class="font-headline text-base font-semibold mb-2" id="hint-title">Подсказка</h3>
      <p id="hint-verdict" class="attempt-hint-verdict"></p>
      <p id="hint-correct" class="text-sm text-ink-600 mb-2"></p>
      <p id="hint-explanation" class="text-sm text-ink-800 leading-relaxed"></p>
      <div class="mt-4 flex justify-end">
        <button type="button" class="btn btn-primary btn--sm" id="hint-close-btn">Понятно</button>
      </div>
    </div>
  </dialog>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/attempt.js') }}" defer></script>
{% endblock %}