{%- assign default_paths = site.pages | map: "path" -%}
{%- assign page_paths = site.header_pages | default: default_paths -%}
{%- assign titles_size = site.pages | where_exp: 'page', 'page.title.size > 0' | size -%}

<header class="header">
  <div class="header__container">
    <div class="header__title">
      {%- if page.layout == 'home' -%}
      <h1><a href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
      {%- else -%}
      <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
      {%- endif -%}
    </div>

    {%- if titles_size > 0 -%}
    <nav class="header__nav">
      <input
        class="header__nav-toggle"
        id="nav-toggle"
        type="checkbox"
        aria-checked="false"
        tabindex="0"
        onclick="updateCheckedAria(event)"
        onkeydown="updateCheckedAria(event)"
      />
      <label for="nav-toggle" aria-label="show/hide the navigation menu">
        <!-- unicode trigram -->
        &#9776;
      </label>

      <ul class="header__links">
      {%- for path in page_paths -%}
        {%- assign header-link = site.pages | where: "path", path | first -%}
        {%- if header-link.title -%}
        <li class="header__link">
          <a
            href="{{ header-link.url | relative_url }}"
            aria-label="{{ header-link.title }}"
            {% if header-link.url == page.url %}
            class="active"
            {% endif %}
            >
            {{ header-link.title | escape }}
          </a>
        </li>
        {%- endif -%}
      {%- endfor -%}
      </ul>
    </nav>
    {%- endif -%}
  </div>
</header>

<script>
  const header = document.querySelector('.header')
  const container = header.querySelector('.header__container')
  const trigger = header.offsetHeight - container.offsetTop

  window.addEventListener("scroll", (event) => {
    if (window.scrollY > trigger) {
      header.classList.add('header--pinned')
    } else {
      header.classList.remove('header--pinned')
    }
  })

  function updateCheckedAria(event) {
    const spacebarKeyCode = 32
    const checkbox = event.target

    if (event.keyCode && event.keyCode !== spacebarKeyCode) {
      return
    }
    checkbox.setAttribute('aria-checked', checkbox.checked)
  }
</script>