<nav class="navbar is-dark mb-4 border-bottom-radius" aria-label="main navigation">
  <div class="navbar-brand ml-3">
    <a class="navbar-item is-size-4 has-text-weight-bold" href="/">
      ScanCode<span class="nexb-orange">.</span>io
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="{% url 'project_list' %}">
        Projects
      </a>
      <a class="navbar-item" href="https://scancodeio.readthedocs.org/" target="_blank">
        Documentation
      </a>
      <a class="navbar-item" href="{% url 'project-list' %}">
        API
      </a>
    </div>
  </div>
  <div class="navbar-end mr-3">
    {% if user.is_authenticated %}
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          {{ user.username }}
        </a>
        <div class="navbar-dropdown is-right">
          <a class="navbar-item" href="{% url 'account_profile' %}">
            Profile settings
          </a>
          <a class="navbar-item" href="{% url 'logout' %}">
            Sign out
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            <i>ScanCode.io {{ SCANCODEIO_VERSION }}</i>
          </div>
          <div class="navbar-item">
            <i>ScanCode-toolkit {{ SCANCODE_TOOLKIT_VERSION }}</i>
          </div>
        </div>
      </div>
    {% else %}
      <div class="navbar-item navbar-item is-cursor-help">
        <div class="dropdown is-right is-hoverable">
          <div class="dropdown-trigger has-text-grey-light">
            v{{ SCANCODEIO_VERSION }}
          </div>
          <div class="dropdown-menu" role="menu" style="min-width: 13rem;">
            <div class="dropdown-content">
              <div class="dropdown-item">
                ScanCode-toolkit: v{{ SCANCODE_TOOLKIT_VERSION }}
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
</nav>