<header id="gh-head" class="gh-head">
    <div class="gh-head-inner gh-container">
        <div class="gh-head-brand-socials-wrapper{{#match @custom.navigation_layout "Mobile menu with logo"}}
            includeMobileMenu{{else match @custom.navigation_layout "Mobile menu with author" }} includeMobileMenu{{else match
            @custom.navigation_layout "Mobile menu with author and icons" }} includeMobileMenu{{else match
            @custom.navigation_layout "Mobile menu with logo and icons" }} includeMobileMenu{{/match}}">
            <button class="gh-burger-btn" aria-label="{{t "Mobile menu button"}}">
                {{> "icons/burger-icon"}}
            </button>
            <div class="gh-head-brand">
                {{#match @custom.navigation_layout "Author on the left"}}
                    {{> "header-author"}}
                {{else match @custom.navigation_layout "Author in the middle"}}
                    {{> "header-author"}}
                {{else match @custom.navigation_layout "Author with social icons"}}
                    {{> "header-author"}}
                {{else match @custom.navigation_layout "Mobile menu with author and icons"}}
                    {{> "header-author"}}
                {{else match @custom.navigation_layout "Mobile menu with author"}}
                    {{> "header-author"}}
                {{else}}
                    <a class="gh-site-logo {{#if @custom.dark_mode_logo}}gh-site-logo-has-DM-logo{{/if}}" href="{{@site.url}}" aria-label="{{@site.title}} {{t "logo and home page link"}}">
                        {{#if @site.logo}}
                            {{#if @custom.dark_mode_logo}}
                            <img src="{{img_url @custom.dark_mode_logo}}" alt="{{@site.title}} {{t "icon"}}" class="gh-site-logo-img-dark-mode">
                            {{/if}}
                            <img src="{{img_url @site.logo}}" alt="{{@site.title}} {{t "icon"}}" class="gh-site-logo-img">
                            {{else}}
                            <h1 class="gh-site-title">{{@site.title}}</h1>
                        {{/if}}
                    </a>
                {{/match}}
            </div>
            {{> "socials"}}
        </div>
        <div class="gh-head-menu">
            {{navigation}}
        </div>
        <div class="gh-head-actions">
            <div class="gh-head-actions-list">
                <button class="gh-dark-mode-toggle-btn" aria-label="{{t "Dark mode toggle button"}}">
                        {{>icons/sun}}
                        {{>icons/moon}}
                </button>
                <button class="gh-search" title="{{t "Search button"}}" aria-label="{{t "Search button"}}" data-ghost-search>{{> "icons/search"}}<span>{{t "Search"}}</span></button>
                {{#if @site.members_enabled}}
                    {{#if @member}}
                    <a class="gh-main-button gh-member-button" href="{{@site.url}}/account" aria-label="{{t "Account page link"}}">{{t "My Account"}}</a>
                    {{else}}
                    <a class="gh-main-button gh-member-button" href="{{@site.url}}/#/portal/signup" aria-label="{{t "Sign up button"}}">{{t "Sign Up"}}</a>
                    {{/if}}
                {{/if}}
            </div>
        </div>
    </div>
    {{> "mobile-menu"}}
    <div class="gh-overlay"></div>
</header>