{%- set nav = site.menus.header|default([]) -%}
{%- set ok = page.status|default(200) < 400 -%}
<header class="bk-header" x-data="mkHeader" :class="{ 'is-scrolled': scrolled }">
    <div class="bk-container bk-header__bar">
        <button type="button" class="bk-icon-btn bk-icon-btn--plain -ml-2 lg:hidden" popovertarget="bk-drawer" aria-label="{{ t('Open menu') }}">{{ icon('menu') }}</button>
        {% include '@theme/partials/header/logo.twig' %}
        {% if nav %}
            <nav class="bk-nav" aria-label="{{ t('Main') }}">
                {% for item in nav %}
                    <div class="bk-nav__item">
                        <a href="{{ item.url }}" class="bk-nav__link{{ item.active and ok ? ' is-active' }}"{% if item.active and ok %} aria-current="page"{% endif %}{% if item.external %} target="_blank" rel="noopener"{% endif %}>
                            {{- item.label -}}{% if item.children %}{{ icon('chevron-down', 'size-4 opacity-60') }}{% endif -%}
                        </a>
                        {% if item.children %}
                            <div class="bk-nav__menu{{ item.auto ? ' bk-nav__menu--auto' }}">
                                {% if item.auto %}<div class="bk-nav__cols">{% endif %}
                                {% for child in item.children %}<a href="{{ child.url }}" class="{{ child.active and ok ? 'is-active' }}"{% if child.external %} target="_blank" rel="noopener"{% endif %}>{{ child.label }}</a>{% endfor %}
                                {% if item.auto %}</div><a href="{{ item.url }}" class="bk-nav__more">{{ t('See all') }}</a>{% endif %}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </nav>
        {% endif %}
        <div class="ml-auto flex items-center gap-2">
            {% if theme.header_search %}
                <div class="hidden w-[min(32vw,340px)] md:block lg:hidden xl:block">{% include '@theme/partials/search-form.twig' %}</div>
                <a href="{{ runtime.search }}" class="bk-icon-btn md:hidden lg:inline-grid xl:hidden" aria-label="{{ t('Search') }}" @click.prevent="toggleSearch()" :aria-expanded="searchOpen.toString()">{{ icon('search', 'size-[18px]') }}</a>
            {% endif %}
            {% if theme.header_watchlist %}
                <button type="button" class="bk-icon-btn" popovertarget="bk-mylist" aria-label="{{ t('My list') }}" x-cloak>
                    {{ icon('bookmark', 'size-[18px]') }}
                    <span class="bk-count" x-show="$store.list.items.length" x-text="$store.list.items.length"></span>
                </button>
            {% endif %}
            {% if theme.mode_switch %}
                <button type="button" class="bk-icon-btn" @click="$store.mode.toggle()" :aria-pressed="$store.mode.dark.toString()" aria-label="{{ t('Dark mode') }}" x-cloak>
                    <span x-show="$store.mode.dark">{{ icon('sun', 'size-[18px]') }}</span>
                    <span x-show="!$store.mode.dark">{{ icon('moon', 'size-[18px]') }}</span>
                </button>
            {% endif %}
        </div>
    </div>
    {% if theme.header_search %}
        <div class="bk-container pb-3 md:hidden lg:block xl:hidden" x-ref="mobileSearch" x-show="searchOpen" x-cloak @keydown.escape="searchOpen = false">
            {% include '@theme/partials/search-form.twig' %}
        </div>
    {% endif %}
</header>
{% include '@theme/partials/header/drawer.twig' %}
{% if theme.header_watchlist %}{% include '@theme/partials/header/mylist.twig' %}{% endif %}