{% include "navbar-js.html" %}
<nav aria-label="main navigation"
     class="navbar"
     hx-boost="true"
     id="navbar"
     name="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img src="/img/rune.png" height="28" alt="rune logo">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicTop">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicTop" class="navbar-menu">
    <div class="navbar-start">
      <a href="/"
         class="navbar-item{% if active == "/" %} has-text-white has-background-link{% endif %}">Home</a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a href="/about"
           class="navbar-link{% if active == "/about" %} has-text-white has-background-link{% endif %}">About</a>

        <div class="navbar-dropdown">
          <a href="/news"
             class="navbar-item{% if active == "/news" %} has-text-white has-background-link{% endif %}">News</a>
          <a href="/todo"
             class="navbar-item{% if active == "/todo" %} has-text-white has-background-link{% endif %}">To-Do List</a>
          <a href="/doc"
             class="navbar-item{% if active == "/doc" %} has-text-white has-background-link{% endif %}">Route Documentation</a>
          <a href="http://{{ server-name }}/git/" target="_blank"
             class="navbar-item{% if active == "/source" %} has-text-white has-background-link{% endif %}">Source Code</a>
        </div>
      </div>

      <div class="navbar-item has-dropdown is-hoverable">
        <a href="/builder"
           class="navbar-link{% if active == "/builder" %} has-text-white has-background-link{% endif %}">Deck Builder</a>
        <div class="navbar-dropdown">
          <a href="/category"
             class="navbar-item{% if active == "/category" %} has-text-white has-background-link{% endif %}">Category List</a>
          <a href="/decks"
             class="navbar-item{% if active == "/decks" %} has-text-white has-background-link{% endif %}">Deck Templates</a>
          <a href="/ydk"
             class="navbar-item{% if active == "/ydk" %} has-text-white has-background-link{% endif %}">YDK Uploader</a>
        </div>
      </div>

      <a href="/cards" class="navbar-item{% if active == "/cards" %} has-text-white has-background-link{% endif %}">Card List</a>

      <a href="/user"
         class="navbar-item{% if active == "/user" %} has-text-white has-background-link{% endif %}">Settings</a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">Tools</a>
        <div class="navbar-dropdown">
          <a href="/contact"
             class="navbar-item{% if active == "/contact" %} has-text-white has-background-link{% endif %}">Contact</a>
          <a href="/upload"
             class="navbar-item{% if active == "/upload" %} has-text-white has-background-link{% endif %}">File Uploads</a>
          <a href="/label-maker"
             class="navbar-item{% if active == "/label-maker" %} has-text-white has-background-link{% endif %}">Label Maker</a>
          <!-- Disable boost on this one... TinyMCE Seems to hate AJAX -->
          <a href="/tinymce" hx-boost="false"
             class="navbar-item{% if active == "/tinymce" %} has-text-white has-background-link{% endif %}">TinyMCE</a>
          <a href="/qr"
             class="navbar-item{% if active == "/qr" %} has-text-white has-background-link{% endif %}">QR Code</a>
        </div>
      </div>
    </div>
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <div class="button" onclick="toggle_darkness()">
            <i class="fa-solid fa-eye" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>