{#- Site header: wordmark, nav, theme toggle.

    `nav_items` is a list of {label, href} set as a Jinja global. Labels are
    not escaped -- autoescape is off site-wide -- so an entity such as
    Résumé passes through as written.
-#}
<header class="site-header">
    <nav>
        <ul>
            <li><a class="wordmark" href="{{ wordmark_href | default('/') }}">{{ site_title }}</a></li>
            {% for item in nav_items %}
            <li><a class="navitem-text" href="{{ item.href }}">{{ item.label }}</a></li>
            {% endfor %}
            <li>
                <button class="theme-toggle" type="button" id="themeToggle" aria-label="Toggle color theme">
                    <span id="themeLabel">dark</span>
                </button>
            </li>
        </ul>
    </nav>
</header>

<script>
    (function () {
        var root = document.documentElement;
        var btn = document.getElementById('themeToggle');
        var label = document.getElementById('themeLabel');

        function current() {
            return root.getAttribute('data-theme') ||
                (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
        }
        function paint() { label.textContent = current(); }

        btn.addEventListener('click', function () {
            var next = current() === 'dark' ? 'light' : 'dark';
            root.setAttribute('data-theme', next);
            try { localStorage.setItem('theme', next); } catch (e) { }
            paint();
        });
        paint();
    })();
</script>