<header class="c-site-header c-site-header--{{headerType}} {{initialAnimationClass}} c-site-header--sticky">
  <div class="c-site-header__top">
    <div class="c-site-header__top-content">
      <div class="c-site-header__hamburger">
        {{> button primaryButtons.hamburger}}
      </div>
      <div class="c-site-header__logo">
        <a href="#" class="c-site-header__logo-link">
          <svg class="c-site-header__logo-art" pointer-events="none" focusable="false" aria-hidden="true">
            <use xlink:href="{{basePath}}/assets/patterns/images/sprite.svg#tgam-logo-boxed"></use>
          </svg>
          <h2 class="c-site-header__logo-text u-visually-hidden">The Globe and Mail</h2>
        </a>
      </div>
      <div class="c-site-header__headline">
        <h3 class="c-site-header__headline-text">{{headline}}</h3>
      </div>
      <div class="c-site-header__buttons">
        <div class="c-site-header__button-group c-site-header__button-group--primary">
          {{> button primaryButtons.subscribe}}
          {{> button primaryButtons.register}}
          {{> button primaryButtons.login}}
          {{> button primaryButtons.search}}
          {{> button primaryButtons.adChoices}}
        </div>
        {{#if secondaryButtons}}
          <div class="c-site-header__button-group c-site-header__button-group--secondary">
            {{> button secondaryButtons.email}}
            {{> button secondaryButtons.twitter}}
            {{> button secondaryButtons.facebook}}
            {{> button secondaryButtons.linkedin}}
            {{> button secondaryButtons.whatsapp}}
          </div>
        {{/if}}
      </div>
    </div>
  </div>
  {{#if scrollMenu}}
    <div class="c-site-header__bottom">
      <div class="c-site-header__bottom-content">
        {{> scroll-menu scrollMenu}}
      </div>
    </div>
  {{/if}}
</header>

<div class="c-site-header__placeholder"></div>

<div class="c-site-header__menu-panel"{{#if menuPanelId}} id="{{menuPanelId}}"{{/if}} hidden>
  {{> menu-panel menuPanel}}
</div>
