<div class="container">
    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
      <div class="col-md-3 mb-2 mb-md-0" style="width:auto">
        <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none pt-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16" role="img" aria-label="Website logo">
            <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
          </svg>
        </a>
      </div>
  
      <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
        <li><a href="/" class="nav-link px-2">Home</a></li>
        <li><a href="/dashboard" class="nav-link px-2">Dashboard</a></li>
        <li><a href="/books" class="nav-link px-2">Books</a></li>
      </ul>
  
      <% if (user) { %>
        <div class="dropdown">
          <a href="#" class="d-flex align-items-center fw-light text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            <strong><%= user.username %></strong>
          </a>
          <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
            <li><a class="dropdown-item" href="/dashboard">Dashboard</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#" onclick="signout()">Sign out</a></li>
            <form id="signout" action="/signout" method="POST" style="display: none;"></form>
            <script> //js to send signout post request
              function signout() {
                const form = document.getElementById('signout');
                form.submit();
              }
            </script>
          </ul>
        </div>
      <% } else { %>
        <div class="col-md-3 text-end" style="width:auto">
          <a class="btn btn-outline-primary me-2" href="/signup" class="nav-link px-2 ">Sign-up</a>
          <a class="btn btn-primary me-2" href="/signin" class="nav-link px-2 ">Login</a>
        </div>
      <% } %>
    </header>
</div>