<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top" style="margin-bottom: 40px;">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">Yaqeen-Halal-Food</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="/admin/dashboard">Dashboard</a>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Customer UI</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="/products">Products in Customer UI</a>
                        <a class="dropdown-item" href="/products/onsale">Products On Sale in Customer UI</a>
                        <div class="dropdown-divider"></div>
                    </div>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Admin UI</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="/admin/products">View Products in Stock</a>
                        <a class="dropdown-item" href="/admin/products/add">Add Product</a>
                        <div class="dropdown-divider"></div>
                        <!-- <a class="dropdown-item" href="#">Estimated Stock Value</a>
                        <div class="dropdown-divider"></div> -->
                        <a class="dropdown-item" href="/admin/users">View Users</a>
                        <a class="dropdown-item" href="/admin/orders">View Orders</a>
                        <a class="dropdown-item" href="/admin/reviews">View Reviews</a>
                    </div>
                </li>

            </ul>

            <% if(!currentUser) {%>
                <div class="d-flex">

                    <div style="padding-right: 5px;">
                        <a href="/user/login" class="btn btn-secondary my-2 my-sm-0" role="button">Sign In</a>
                    </div>
                    <div>
                        <a href="/user/register" class="btn btn-warning my-2 my-sm-0" role="button">Sign Up</a>
                    </div>
                </div>
                <% } else { %>
                    <form class="d-flex" method="GET" action="/user/logout">

                        <div style="padding-right: 5px;">
                            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Sign Out</button>
                        </div>
                        <div>
                            <a href="/user/myaccount" class="btn btn-info my-2 my-sm-0" role="button">MyAccount</a>
                        </div>
                    </form>
                    <% } %>
        </div>
    </div>
</nav>