#set($completed = $test.getCompletedQuestions().size())
#set($total = $test.getNodes().size())
#set($percent = $test.getPercentageComplete()*100)

<div class="d-flex flex-column gap-4 p-3 bg-light border-end h-100">

  <h5 class="fw-bold border-bottom pb-2 mb-0">
    <i class="bi bi-ui-checks-grid me-1"></i> $!test.getTestPlan()
  </h5>

  #if($test.isTimed() && !$test.isSubmitted())
   <div class="border-bottom pb-2">
  <label class="text-muted small text-uppercase d-block mb-1">Time Remaining</label>
  <div id="test-timer"
       class="fw-bold fs-5 #if($test.isPaused()) text-muted #else text-danger #end"
       data-mode="#if($testplan.showelapsedtime == "true")elapsed#else remaining#end"
       data-paused="#if($test.isPaused())true#else false#end"
       data-seconds="$test.getTestTimer().getSeconds()">
    <!-- Timer fills in via JS -->
  </div>
  #if($test.isPaused())
    <small class="text-muted fst-italic">Paused</small>
  #end
</div>
  #end

  <div class="border-bottom pb-2">
    <label class="text-muted small text-uppercase d-block mb-1">Progress</label>
    <div class="progress" style="height: 10px;">
      <div class="progress-bar bg-warning" role="progressbar"
           style="width: ${percent}%;" aria-valuenow="$percent" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <small class="text-muted d-block mt-1">${completed} of ${total} complete</small>
  </div>

  

  #set($nodes = $test.getNodesByQuestionType("seperator"))
  #if($nodes && !$nodes.isEmpty())
    <div class="border-bottom pb-2">
      <label for="questionid-sections" class="form-label text-muted small text-uppercase">Sections</label>
      <select id="questionid-sections"
              class="form-select form-select-sm section-jump selectpicker"
              #if($test.isSubmitted()) disabled #end>
        #set($index = 0)
        #foreach($node in $nodes)
          #set($index = $index + 1)
          #set($question = $node.getQuestion())
          #set($selected = $node.getId() == $test.getCurrentNode().getId())
          <option value="$node.id" #if($selected) selected #end>
            $question.getText()
          </option>
        #end
      </select>
    </div>
  #end

  #set($nodes = $test.getNodes())
  #if($nodes && !$nodes.isEmpty())
    <div>
      <a href="$apphome/test/questionselector.html"
         class="btn btn-outline-secondary btn-sm w-100"
         data-ajax-modal
         data-title="Jump to Question"
         data-width="60%"
         data-target="$apphome/test/active/questionselector.html?oemaxlevel=1">
        <i class="bi bi-grid me-1"></i> View Question Map
      </a>
    </div>
  #end

#if(!$test.isComplete())
  <div class="pt-3 mt-3 border-top">
    <nav aria-label="Test controls" class="d-flex justify-content-center">
      <ul class="pagination shadow-sm border rounded overflow-hidden mb-0">

        <!-- Previous -->
        <li class="page-item #if($percent == 0 || $test.isSubmitted()) disabled #end">
          <a class="page-link previous" href="#" tabindex="-1">
            <i class="bi bi-arrow-left"></i> Back
          </a>
        </li>

        <!-- Pause/Resume -->
        <li class="page-item">
          #if($test.isPaused())
            <a class="page-link" href="$apphome/test/active/actions/resumetest.html">
              <i class="bi bi-play-fill"></i> Resume
            </a>
          #else
            <a class="page-link" href="$apphome/test/active/actions/pausetest.html">
              <i class="bi bi-pause-fill"></i> Pause
            </a>
          #end
        </li>

        <!-- Submit -->
        <li class="page-item #if($test.isSubmitted()) disabled #end">
          <a class="page-link submittest" href="#">
            <i class="bi bi-check2-circle"></i> Submit
          </a>
        </li>

        <!-- Quit -->
        <li class="page-item #if($test.isSubmitted()) disabled #end">
          <a class="page-link quittest" href="#">
            <i class="bi bi-x-circle"></i> Quit
          </a>
        </li>

        <!-- Next -->
        <li class="page-item #if($percent == 0 || $test.isSubmitted()) disabled #end">
          <a class="page-link next" href="#">
            Next <i class="bi bi-arrow-right"></i>
          </a>
        </li>

      </ul>
    </nav>
  </div>
#end





  <!-- ⬇️ You can safely add more panels below this in the future -->

</div>

<script>
(function () {
	const timer = document.getElementById('test-timer');
	if (!timer || timer.dataset.paused === "true") return;

	let seconds = parseInt(timer.dataset.seconds, 10);
	if (isNaN(seconds)) return;

	const mode = timer.dataset.mode;

	function format(sec) {
		const h = String(Math.floor(sec / 3600)).padStart(2, '0');
		const m = String(Math.floor((sec % 3600) / 60)).padStart(2, '0');
		const s = String(sec % 60).padStart(2, '0');
		return `${h}:${m}:${s}`;
	}

	timer.textContent = format(seconds);

	setInterval(() => {
		if (mode === "elapsed") {
			seconds++;
		} else {
			seconds = Math.max(0, seconds - 1);
		}
		timer.textContent = format(seconds);
	}, 1000);
})();
</script>