<nav class="navbar main border-bottom">
    <div class="nav-right">
      <a href="/" class="navbar-brand fs-2"><i class="bi bi-geo-alt-fill"></i> Where To Buy</a>
      <a href="/listings/new" class="btn btn-primary nav-item font-btn">Contribute</a>
    </div>

    <div class="nav-middle">
      
    </div>

    <div class="nav-right">
      <% if (user) { %>
        <a href="/account/bookmarks" class="btn btn-secondary nav-item font-btn"><i class="bi bi-bookmark-fill"></i> Bookmarks</a>
        <span class="profile nav-item">
          <span class="navbar-text"><%= user.name %></span>
          <img src="<%= user.avatar %>" alt="avatar" class="avatar"/>
        </span>
        <span class="dropdown nav-item">
          <a href="#" class="btn dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Account</a>
          <ul class="dropdown-menu" style="right: 0; left: auto;">
            <li><a href="/account" class="dropdown-item">Profile</a></li>
            <li><a href="/account/listings" class="dropdown-item">Listings</a></li>
            <li><a href="/account/reviews" class="dropdown-item">Reviews</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a href="/logout" class="dropdown-item">Logout</a></li>
          </ul>
        </span>
      <% } else { %>
        <a href="/login" class="btn btn-light">LOGIN / REGISTER</a>
      <% } %>
    </div>
</nav>