<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-2">
    <div class="container">
      <a class="navbar-brand" href="{{ url_for("dashboard") }}">{{ header_name }}</a>
      <button class="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarNav"
              aria-controls="navbarNav"
              aria-expanded="false"
              aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse d-print-none" id="navbarNav">
        {# This feature is only available for power-users #}
        {% if currentuser.ROLE_ADMIN == currentuser.role %}<SearchUser />{% endif %}
        <ul class="navbar-nav ms-auto">
          {# Show Ask For help for current user only. #}
          {% if user|d(False) and user.username == username %}
            <li class="nav-item">
              <a class="nav-link ssp-show-modal"
                 href="#"
                 data-bs-toggle="modal"
                 data-bs-target="#modal-request-support">
                <Icon value="bi-life-preserver" />
                {% trans %}Ask for help{% endtrans -%}
              </a>
            </li>
          {% endif %}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle"
               href="#"
               id="navbarDropdownMenuLink"
               role="button"
               data-bs-toggle="dropdown"
               aria-expanded="false">
              <i class="bi bi-person-fill" aria-hidden="true"></i> <strong>{{ username }}</strong>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <LocaleSelection header={{ _("Language") }} />
              <li>
                <hr class="dropdown-divider">
              </li>
              <ColorModes header={{ _("Colors") }} light_label={{ _("Light") }} dark_label={{ _("Dark") }} auto_label={{ _("Auto") }} />
              <li>
                <hr class="dropdown-divider">
              </li>
              <li>
                <div class="dropdown-item">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="nerdMode">
                    <label class="form-check-label" for="nerdMode">{% trans %}Nerd Mode{% endtrans %}</label>
                  </div>
                </div>
              </li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li>
                <form action="{{ url_for("logout") }}" method="post">
                  <button type="submit" class="dropdown-item">{% trans %}Logout{% endtrans %}</button>
                </form>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>
