{% extends "base.html" %}

{% block site_nav %}
  {# Include the original sidebar navigation #}
  {{ super() }}

  {# Quiz progress sidebar - will be moved to TOC by quiz.js #}
  <div id="quiz-progress-sidebar" aria-label="Quiz Progress" style="display: none;">
    <!-- mkdocs-quiz progress sidebar (desktop) -->
    <label class="md-nav__title">
      <span class="md-nav__icon md-icon"></span>
      <span data-quiz-translate="Quiz Progress">Quiz Progress</span>
    </label>
    <ul class="md-nav__list" data-md-component="quiz-progress">
      <li class="md-nav__item">
        <div class="md-nav__link">
          <span class="md-ellipsis">
            <span data-quiz-translate="Answered:">Answered:</span> <span class="quiz-progress-answered">0</span> / <span class="quiz-progress-total">0</span> (<span class="quiz-progress-answered-percentage">0%</span>)
          </span>
        </div>
      </li>
      <li class="md-nav__item">
        <div class="md-nav__link">
          <div class="quiz-progress-bar">
            <div class="quiz-progress-bar-incorrect" style="width: 0%"></div>
            <div class="quiz-progress-bar-correct" style="width: 0%"></div>
          </div>
        </div>
      </li>
      <li class="md-nav__item">
        <div class="md-nav__link quiz-correct-reset">
          <span class="md-ellipsis">
            <span data-quiz-translate="Correct:">Correct:</span> <span class="quiz-progress-score">0</span> / <span class="quiz-progress-score-total">0</span> (<span class="quiz-progress-score-percentage">0%</span>)
          </span>
          <a href="#" class="quiz-reset-all-link" style="color: var(--md-primary-fg-color); text-decoration: none;">
            <span data-quiz-translate="Reset">Reset</span>
          </a>
        </div>
      </li>
    </ul>
  </div>
{% endblock %}

{% block tabs %}
  {# Mobile quiz progress tracker - appears under navbar on mobile devices #}
  <nav id="quiz-progress-mobile" class="quiz-progress-mobile md-nav" aria-label="Quiz Progress" style="display: none;">
    <!-- mkdocs-quiz progress sidebar (mobile) -->
    <div class="quiz-progress-bar">
      <div class="quiz-progress-bar-incorrect" style="width: 0%"></div>
      <div class="quiz-progress-bar-correct" style="width: 0%"></div>
    </div>
    <div data-md-component="quiz-progress">
        <div class="quiz-correct-reset">
          <span class="md-ellipsis">
            <span data-quiz-translate="Answered:">Answered:</span> <span class="quiz-progress-answered">0</span> / <span class="quiz-progress-total">0</span>
          </span>
          <span class="md-ellipsis">
            <span data-quiz-translate="Correct:">Correct:</span> <span class="quiz-progress-score">0</span> / <span class="quiz-progress-score-total">0</span>
          </span>
          <a href="#" class="quiz-reset-all-link" style="color: var(--md-primary-fg-color); text-decoration: none;">
            <span data-quiz-translate="Reset">Reset</span>
          </a>
        </div>
    </div>
  </nav>

  {# Include the original tabs content #}
  {{ super() }}
{% endblock %}