<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="{{! base }}">
      <!-- Replace with your logo. Just specify height, not width. -->
      <img height="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkAQAAAADJe6U1AAAABGdBTUEAALGPC/xhBQAAAAJ0Uk5TAAB2k804AAAANUlEQVR42mNgwAX4/x8AkvZgsh5M/geTP8CyH0ggP1BKMoLIH8wfwG54AHbPA7jb+P9jcz0AKpcxBQbNJ8sAAAAASUVORK5CYII=" alt="Logo">
      <span class="text-uppercase">{{ appname }}</span>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="https://gramener.com/gramex/guide/">Guide</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://stackoverflow.com/search?tab=Relevance&pagesize=-1&q=gramex&searchOn=1">Q&A</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Links
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="https://www.youtube.com/watch?v=lkBqm6XoccI&list=PLrn2FHBzHtaMDFAkpJ1JDXbtfvcVvpsAJ">Videos</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="https://uifactory.gramener.com/">UIFactory</a></li>
            <li><a class="dropdown-item" href="https://gramener.com/charts/">Charts</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-primary" type="submit">Search</button>
      </form>
      <ul class="navbar-nav ms-2">
        {%! if handler.current_user %}
          <li class="nav-item">
            <a class="nav-link" href="{{! base }}/login/" title="Log in again" data-placement="bottom">
              {{! handler.current_user.id }}
            </a>
          </li>
          <li class="nav-item">
            <a class="btn btn-danger" href="{{! base }}/logout/" title="Log out" data-placement="bottom">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z" />
                <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" />
              </svg>
            </a>
          </li>
        {%! else %}
          <li class="nav-item">
            <a class="btn btn-primary" href="{{! base }}/login/" title="Log in again" data-placement="bottom">
              Log in
            </a>
          </li>
        {%! end %}
        </ul>
    </div>
  </div>
</nav>
