{{ extends 'global/Page.html' }}

{{ block content }}
<style>
.intro-progress-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid #e0e0e0;
    margin-top: -50px;
    margin-bottom: 20px;
    font-size: 13px;
}
.intro-section-label {
    color: #c0c0c0;
}
.intro-section-label.active {
    font-weight: bold;
    color: #333;
}
.intro-section-sep {
    color: #d8d8d8;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var match = window.location.pathname.match(/Intro(\d+)/i);
    if (!match) return;
    var num = parseInt(match[1]);
    var section;
    if      (num <= 20) section = 'Introduction';
    else if (num <= 23) section = 'Comprehension Quiz';
    else if (num <= 32) section = 'Video and Practice Round';
    else if (num <= 37) section = 'Recap';
    else                section = 'Final Quiz';
    document.querySelectorAll('.intro-section-label').forEach(function (el) {
        if (el.dataset.section === section) el.classList.add('active');
    });
    // Move header above the page title <h2>
    var header = document.querySelector('.intro-progress-header');
    var h2 = document.querySelector('h2');
    if (header && h2 && h2.parentNode) {
        h2.parentNode.insertBefore(header, h2);
    }
});
</script>
<div class="intro-progress-header">
    <span class="intro-section-label" data-section="Introduction">Introduction</span>
    <span class="intro-section-sep">›</span>
    <span class="intro-section-label" data-section="Comprehension Quiz">Comprehension Quiz</span>
    <span class="intro-section-sep">›</span>
    <span class="intro-section-label" data-section="Video and Practice Round">Video and Practice Round</span>
    <span class="intro-section-sep">›</span>
    <span class="intro-section-label" data-section="Recap">Recap</span>
    <span class="intro-section-sep">›</span>
    <span class="intro-section-label" data-section="Final Quiz">Final Quiz</span>
</div>
{{ block page_body }}{{ endblock }}
{{ endblock }}