<header class="header-main">
  <div class="top-bar">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-10 col-12 px-xl-5">
          <ul class="topbar-links">
            <li>
              <a href="/return-policy">return</a>
            </li>
            <li>
              <a href="/privacy-policy">privacy</a>
            </li>
            <li>
              <a href="/terms-condition">terms</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="header-wrapper">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-10 col-12 px-xl-5">
          <nav class="navbar navbar-expand-lg">
            <a class="navbar-brand" href="/">
              <img src="<%= baseUrl %>images/dashboard-logo.png" alt="">
            </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">
              <i class="fa-sharp fa-light fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mx-auto">
                <li class="nav-item custom-nav-item">
                  <a class="nav-link custom-nav-link" href="/">Home</a>
                </li>
                <li class="nav-item custom-nav-item">
                  <a class="nav-link custom-nav-link" href="/about-us">about us</a>
                </li>
                <% if (user) { %>
                <li class="nav-item custom-nav-item">
                  <a class="nav-link custom-nav-link" href="/packages">packages</a>
                </li>
                <% } %>
                <li class="nav-item custom-nav-item">
                  <a class="nav-link custom-nav-link" href="/contact-us">Contact Us</a>
                </li>
                <li class="nav-item custom-nav-item">
                  <% if(user){ %>
                    <a class="nav-link custom-nav-link" href="/send-now">Dashboard</a>
                  <% } else { %>
                    <a class="nav-link custom-nav-link" href="/send-now">Send Now</a>
                    <% } %>
                  </li>
                  <% if(user?.role == "admin"){ %>
                  <li class="nav-item custom-nav-item">
                    <a class="nav-link custom-nav-link" href="/admin/dashboard">Admin</a>
                  </li>
                  <% } %>
                </ul>
              <ul class="navbar-nav">
                <li class="nav-item custom-nav-item">
                  <% if (user) { %>
                  <a class="nav-link custom-nav-link link-end" href="/api/user/logout">
                    <i class="fa-solid fa-user"></i> log out
                  </a>
                  <% } else { %>
                  <a class="nav-link custom-nav-link link-end" href="/login">
                    <i class="fa-solid fa-user"></i> my account
                  </a>
                  <% } %>

                </li>
                <% if (user) { %>
                <li class="nav-item custom-nav-item">
                  <span class="nav-link custom-nav-link link-end credits"><%= user.credits %> Credits</span>
                </li>
                <li class="nav-item custom-nav-item">
                    <!--<a class="nav-link custom-nav-link link-end" data-bs-toggle="offcanvas" href="#view-cart-offcanvas" role="button" aria-controls="view-cart-offcanvas">-->
                    <a class="nav-link custom-nav-link link-end" href="/cart">
                        <i class="fa-solid fa-cart-shopping"></i>
                        <span class="badge"><%= user.cart?.length %></span>
                    </a>
                </li>
                <% } %>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>