{{!-- Kopfzeile: Logo links, Menü und Symbole rechts in einer Zeile --}}
<header class="site-header container">

    <a class="site-brand" href="{{@site.url}}">
        {{#if @site.logo}}
            <img class="site-brand__logo" src="{{img_url @site.logo size="s"}}" alt="{{@site.title}}">
        {{else}}
            <span class="site-brand__title">{{@site.title}}</span>
        {{/if}}
    </a>

    <nav class="site-nav" id="site-nav" aria-label="{{t "Menu"}}">
        {{navigation}}
    </nav>
    {{!--
        Aufklappmenüs: Ghost kennt nur ein flaches Menü. Die Ebene ergibt sich aus den
        Bindestrichen am Anfang des Namens:
            Unsere Reisen
            - Europa            (Unterpunkt von "Unsere Reisen")
            -- Zypern           (Unterpunkt von "Europa")
            - Asien
        Das Skript steht direkt hinter dem Menü, damit nichts sichtbar umspringt.
    --}}
    <script>
        (function () {
            var list = document.querySelector('#site-nav > ul');
            if (!list) return;

            var chevron = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>';
            var submenuOf = function (parent) {
                var submenu = parent.querySelector(':scope > .nav-submenu');
                if (submenu) return submenu;
                submenu = document.createElement('ul');
                submenu.className = 'nav-submenu';
                var toggle = document.createElement('button');
                toggle.type = 'button';
                toggle.className = 'nav-submenu-toggle';
                toggle.setAttribute('aria-expanded', 'false');
                toggle.setAttribute('aria-label', parent.querySelector('a').textContent);
                toggle.innerHTML = chevron;
                parent.classList.add('nav-has-children');
                parent.appendChild(toggle);
                parent.appendChild(submenu);
                return submenu;
            };

            // parents[0] = letzter Hauptpunkt, parents[1] = letzter Unterpunkt der ersten Ebene
            var parents = [null, null];
            Array.prototype.slice.call(list.children).forEach(function (item) {
                var link = item.querySelector('a');
                if (!link) return;
                var match = /^\s*((?:[-–—]\s*)+)(.+)$/.exec(link.textContent);
                var depth = match ? Math.min(match[1].replace(/\s/g, '').length, 2) : 0;
                // Ohne passenden Oberpunkt eine Ebene höher einhängen
                while (depth > 0 && !parents[depth - 1]) depth--;

                if (depth === 0) {
                    parents = [item, null];
                    return;
                }
                link.textContent = match[2];
                submenuOf(parents[depth - 1]).appendChild(item);
                if (depth === 1) parents[1] = item;

                // Ist ein Unterpunkt die aktuelle Seite, werden auch seine Oberpunkte hervorgehoben
                if (item.classList.contains('nav-current')) {
                    for (var i = 0; i < depth; i++) parents[i].classList.add('nav-current-parent');
                }
            });
        })();
    </script>

    <div class="site-actions">
        <button class="icon-link" type="button" data-ghost-search aria-label="{{t "Search"}}">
            <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        </button>

        <button class="icon-link theme-toggle" type="button" aria-label="{{t "Toggle dark mode"}}">
            <svg class="theme-toggle__moon" viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
            <svg class="theme-toggle__sun" viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
        </button>

        {{#if @site.members_enabled}}
            {{#if @member}}
                <a class="btn" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
            {{else}}
                <a class="btn" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
            {{/if}}
        {{/if}}

        <button class="icon-link nav-toggle" type="button" aria-label="{{t "Menu"}}" aria-expanded="false" aria-controls="site-nav">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        </button>
    </div>

</header>