<header class="main-header">
  <div class="header-content">
    <div class="logo-line">
      <a class="logo-link" href="/">
        <img src="/images/prosperon-square.png" alt="Prosperon Logo">
      </a>
      <span>by</span>
      <a class="logo-link" href="https://pockle.world">
        <img src="/images/pockle_logo_small.png" alt="Pockle Logo">
      </a>
    </div>

    <input type="checkbox" id="menu-toggle" />
    <label for="menu-toggle" class="hamburger">
      <span></span>
      <span></span>
      <span></span>
    </label>

    <nav class="header-nav" id="nav-links">
      {{ range .Site.Menus.main }}
        {{ if .Params.external }}
          <a href="{{ .URL }}" target="_blank" rel="noopener">{{ .Name }}</a>
        {{ else }}
          <a href="{{ .URL }}"{{ if $.IsMenuCurrent "main" . }} class="active"{{ end }}>{{ .Name }}</a>
        {{ end }}
      {{ end }}
      <button class="buy_button">Checkout</button>
    </nav>
  </div>
</header>

<script type="text/javascript" src="https://static.itch.io/api.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var buyButtons = document.querySelectorAll('.buy_button');
    buyButtons.forEach(function(button) {
      Itch.attachBuyButton(button, {
        user: "pockleworld",
        game: "prosperon"
      });
    });
  });
</script>
