{{!--
    Parameters:
    * navigationLayout ("Stacked", "Logo on the left", "Logo in the middle")
--}}

<header id="gh-head" class="gh-head gh-outer is-head-{{#match navigationLayout "Logo on the left"}}left-logo{{else match navigationLayout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#if isTransparent}} is-head-transparent{{/if}}">
    <div class="gh-head-inner{{#unless fullWidth}} gh-inner{{/unless}}">
        <div class="gh-head-brand">
            <div class="gh-head-brand-wrapper">
                <a class="gh-head-logo" href="{{@site.url}}">
                    {{#if @site.logo}}
                        <img src="{{@site.logo}}" alt="{{@site.title}}">
                    {{else}}
                        {{@site.title}}
                    {{/if}}
                </a>
            </div>
            <button class="gh-search gh-icon-btn" aria-label="{{t "Search this site"}}" data-ghost-search>{{> "icons/search"}}</button>
            <button class="gh-burger" aria-label="{{t "Toggle menu"}}"></button>
        </div>

        <nav class="gh-head-menu">
            {{navigation}}
            {{#unless @site.members_enabled}}
                {{#match navigationLayout "Stacked"}}
                    <button class="gh-search gh-icon-btn" aria-label="{{t "Search this site"}}" data-ghost-search>{{> "icons/search"}}</button>
                {{/match}}
            {{/unless}}
        </nav>

        <div class="gh-head-actions">
            {{#unless @site.members_enabled}}
                {{^match navigationLayout "Stacked"}}
                    <button class="gh-search gh-icon-btn" aria-label="{{t "Search this site"}}" data-ghost-search>{{> "icons/search"}}</button>
                {{/match}}
            {{else}}
                <button class="gh-search gh-icon-btn" aria-label="{{t "Search this site"}}" data-ghost-search>{{> "icons/search"}}</button>
                <div class="gh-head-members">
                    {{#unless @member}}
                        {{#unless @site.members_invite_only}}
                            <a class="gh-head-link" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
                            {{#unless hideSubscribeButton}}
                                <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
                            {{/unless}}
                        {{else}}
                            <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
                        {{/unless}}
                    {{else}}
                        <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
                    {{/unless}}
                </div>
            {{/unless}}
        </div>
    </div>
</header>