<header class="topbar">
    <div class="topbar__brand">
        <button class="topbar__sidebar-toggle" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
            <img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
            <img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
        </button>
        <a class="brand brand--topbar" href="{{@site.url}}">
            <span class="brand__name">{{@site.title}}</span>
        </a>
    </div>
    <div class="topbar__search">
        <button class="search-trigger" type="button" data-search-open aria-label="Open search">
            <span class="search-trigger__icon">⌕</span>
            <span>Search</span>
            <span class="search-shortcut">/</span>
        </button>
    </div>
    <div class="topbar__actions">
        <button class="icon-button icon-button--search-mobile" type="button" data-search-open aria-label="Open search">⌕</button>
        {{#if @member}}
            <a class="button button--accent" href="#/portal/account">Account</a>
            <a class="icon-button icon-button--profile" href="#/portal/account" aria-label="Account"><span></span></a>
        {{else}}
            <a class="button button--accent" href="#/portal/signup">Buy {{@site.title}}</a>
            <a class="icon-button icon-button--profile" href="#/portal/signin" aria-label="Sign in"><span></span></a>
        {{/if}}
    </div>
</header>

<div class="search-modal" data-search-modal hidden>
    <div class="search-modal__backdrop" data-search-close></div>
    <div class="search-modal__panel">
        <div class="search-modal__input">
            <button type="button" class="icon-button icon-button--plain" data-search-close aria-label="Close search">×</button>
            <input type="search" placeholder="Search posts, tags and authors" data-search-input>
        </div>
        <div class="search-modal__body" data-search-results>
            <p class="search-modal__hint">Start typing to filter visible posts, tags, and authors in the current page.</p>
        </div>
    </div>
</div>
