<link rel="stylesheet" type="text/css" href="{{asset "css/navbar.css"}}" />

<custom-header class="header">
    <div class="wide-container navbar-inner">
        <div class="navbar-top">
           <div class="socials">
                {{#if @site.facebook}}
                    <a href="{{facebook_url @site.facebook}}" target="_blank" class="social" aria-label="Facebook">
                        <div class="social-inner">
                            {{> "icons/facebook-icon"}}
                        </div>
                    </a>
                {{/if}}   

                {{#if @site.twitter}}
                    <a href="{{twitter_url @site.twitter}}" target="_blank" class="social" aria-label="Twitter">
                        <div class="social-inner">
                            {{> "icons/twitter-icon"}}
                        </div>
                    </a>
                {{/if}}   

                <a href="#" id="instagram" target="_blank" class="social" aria-label="Instagram">
                    <div class="social-inner social-inner-smaller">
                        {{> "icons/instagram-icon"}}
                    </div>
                </a>

                <a href="#" id="linkedin" target="_blank" class="social" aria-label="Linkedin">
                    <div class="social-inner social-inner-smaller">
                        {{> "icons/linkedin-icon"}}
                    </div>
                </a>

                <a href="#" id="pinterest" target="_blank" class="social" aria-label="Pinterest">
                    <div class="social-inner">
                        {{> "icons/pinterest-icon"}}
                    </div>
                </a>

                <span id="socials-info" class="hidden" data-urls="{{@custom.social_urls}}"></span>        
           </div> 

           <div class="menu-button-wrapper">
                <button class="menu-button unstyled-button" aria-label="Menu button">
                    <div class="menu-line first-line"></div>
                    <div class="menu-line mobile-line"></div>
                    <div class="menu-line second-line"></div>
                </button>
            </div>

           <div class="logo-wrapper">
                <a class="logo" href="{{@site.url}}">
                    {{#if @site.logo}}
                        <img class="logo-image" src="{{@site.logo}}" alt="{{@site.title}}">
                    {{else}}
                        <div class="navbar-logo-text">
                            {{@site.title}}
                        </div>                       
                    {{/if}}
                </a>
            </div>

           <div class="navbar-account-links">
                <a class="account-button-wrapper" aria-label="Search button" href="javascript:" data-ghost-search>
                    <div class="account-icon-wrapper">
                        {{> "icons/search-icon" }}
                    </div>
                    <span class="account-button-text">
                        {{t "Search"}}
                    </span>                      
                </a>

                {{#if @site.members_enabled}}
                    {{#unless @member}}
                        <div class="account-buttons-separator"></div>

                        <a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="signin"{{else}}href="{{@site.url}}/signin/"{{/match}} class="account-button-wrapper" aria-label="Sign in">
                            <div class="account-icon-wrapper">
                                {{> "icons/account-icon" }}
                            </div>
                            <span class="account-button-text">
                                {{t "Sign in"}}
                            </span>                              
                        </a>

                        <a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="subscribe"{{else}}href="{{@site.url}}/subscribe/"{{/match}} class="button subscribe-button">
                            {{t "Subscribe"}}                          
                        </a>
                    {{else}}
                        <div class="account-buttons-separator"></div>
                        <a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="account"{{else}}href="{{@site.url}}/account/"{{/match}} class="account-button-wrapper" aria-label="Account">
                            <div class="account-icon-wrapper">
                                {{> "icons/account-icon" }}
                            </div>
                            <span class="account-button-text">
                                {{t "Account"}}
                            </span>                              
                        </a>
                    {{/unless}} 
                {{/if}}
           </div>
        </div>

        <div class="navbar-links-outer">
            <div class="navbar-links-inner">
                {{navigation}}

                {{#if @site.members_enabled}}
                    {{#unless @member}}
                        <div class="subscribe-button-mobile-wrapper">
                            <a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="subscribe"{{else}}href="{{@site.url}}/subscribe/"{{/match}} class="button subscribe-button subscribe-button-mobile">
                                {{t "Subscribe"}}                          
                            </a>
                        </div>
                    {{/unless}} 
                {{/if}}
            </div>
        </div>
    </div>
</custom-header>