{% set themeConfig = config.pluginsConfig['theme-learnj'] or {} %}

{% block book_header %}
<header class="learnj-header sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:px-6" role="banner">
    <button type="button" id="learnj-sidebar-toggle" class="learnj-btn-ghost lg:hidden" aria-label="Toggle sidebar">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
    </button>

    <div class="flex min-w-0 flex-1 items-center gap-2">
        {% if glossary.path %}
        <a href="{{ ('/' + glossary.path)|resolveFile }}" class="learnj-btn-outline hidden sm:inline-flex" aria-label="{{ "GLOSSARY_OPEN"|t }}">
            Glossary
        </a>
        {% endif %}
        <h1 class="truncate text-sm font-semibold sm:text-base">
            <a href="{{ "/"|resolveFile }}" class="hover:text-primary transition-colors">{{ page.title }}</a>
        </h1>
    </div>

    <div class="flex shrink-0 items-center gap-1">
        {% if themeConfig.githubUrl %}
        <a href="{{ themeConfig.githubUrl }}" target="_blank" rel="noopener noreferrer"
           class="learnj-btn-ghost"
           aria-label="View on GitHub"
           title="View on GitHub">
            {% include "website/github-icon.html" %}
        </a>
        {% endif %}
        <button type="button" id="learnj-theme-toggle" class="learnj-btn-ghost" aria-label="Toggle dark mode">
            <svg class="hidden dark:block" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
            <svg class="block dark:hidden" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
        </button>
    </div>
</header>
{% endblock %}