<header>
  <nav>
    <div class="nav-row">
      <div class="nav-home"><a href="{{ "/" | url }}">{{ site.title }}</a></div>
      <div class="nav-settings">
        <div class="nav-toggles">
          <label class="nav-toggle-button" title="Light mode">☀️<input type="radio" name="theme" value="light"/></label>
          <label class="nav-toggle-button" title="Automatic">🔄<input type="radio" name="theme" value="auto"/></label>
          <label class="nav-toggle-button" title="Dark mode">🌒<input type="radio" name="theme" value="dark"/></label>
        </div>
        <div class="nav-toggles">
          <label class="nav-toggle-button" data-language="english">English<input type="radio" name="language" value="english"/></label>
          <label class="nav-toggle-button" data-language="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
        </div>
      </div>
    </div>
    <div class="nav-categories">
      <a class="{{ 'nav-active' if '/posts' in page.url }}" href="{{ "/posts/" | url }}">/posts</a>
      <a class="{{ 'nav-active' if '/about' in page.url }}" href="{{ "/about/" | url }}">/about</a>
      <a class="{{ 'nav-active' if '/now' in page.url }}" href="{{ "/now/" | url }}">/now</a>
      <a class="{{ 'nav-active' if '/uses' in page.url }}" href="{{ "/uses/" | url }}">/uses</a>
      <a class="{{ 'nav-active' if '/recipes' in page.url }}" href="{{ "/recipes/" | url }}">/recipes</a>
      <a class="{{ 'nav-active' if '/music' in page.url }}" href="{{ "/music/" | url }}">/music</a>
      <a class="{{ 'nav-active' if '/books' in page.url }}" href="{{ "/books/" | url }}">/books</a>
      <a class="{{ 'nav-active' if '/search' in page.url }}" href="{{ "/search/" | url }}">/search</a>
    </div>
  </nav>
  <h1>{{ tag | capitalize if tag else title }}</h1>
  <div class="header-meta">
    {%- if author -%}
      <author>{{ author }}</author>
    {%- endif -%}
    {%- if date -%}
      <date>{{ date | formatDate("MMMM D, YYYY") }}</date>
    {%- endif -%}
  </div>
</header>