<% if(user) { %>
  <!-- NAVBAR STARTS HERE -->
  <header class="header-main">
    <nav class="main-nav  navbar navbar-expand-lg " data-aos="fade-down" data-aos-duration="3200"
      data-aos-easing="ease-in-sine">
      <div class="container">
        <a class="navbar-brand" href="/">
          <img src="/assets/img/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">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse " id="navbarSupportedContent">
          <ul class="navbar-nav own-navbar-nav own-navbar-nav2 ms-auto mb-2 mb-lg-0">
            <!-- <li class="nav-item">
              <a class="nav-link" href="#">Categories</a>
            </li>
            <li class="nav-item px-4">
              <a class="nav-link" href="#">Business Product</a>
            </li> -->
            <li class="nav-item">
              <a href="/" class="dash-btn"> <i class="bi bi-house text-white px-1"></i>
                HOME</a>
            </li>
            <li class="nav-item">
              <a href="/profile"><img
                  src="<%= user.profilePic ? user.profilePic : '/assets/img/user-icon.webp' %>" alt=""
                  class="dash-img"></a>
            </li>
            <li class="nav-item">
              <button type="button" onclick="deleteCookie('authtoken')" class="logout-btn">
                LOGOUT <i class="bi bi-box-arrow-left  px-1"></i></button>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <!-- NAVBAR ENDS HERE -->
  <% } else if(business) { %>
    <!-- NAVBAR STARTS HERE -->
    <header class="header-main">
      <nav class="main-nav  navbar navbar-expand-lg " data-aos="fade-down" data-aos-duration="3200"
        data-aos-easing="ease-in-sine">
        <div class="container">
          <a class="navbar-brand" href="/">
            <img src="/assets/img/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">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse " id="navbarSupportedContent">
            <ul class="navbar-nav own-navbar-nav own-navbar-nav2 ms-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" href="/jobposting">Post a Job</a>
              </li>
              <!-- <li class="nav-item px-4">
                <a class="nav-link" href="#">Business Product</a>
              </li> -->
              <li class="nav-item">
                <a href="/" class="dash-btn"> <i class="bi bi-house text-white px-1"></i>
                  HOME</a>
              </li>
              <li>
                <a href="/profile"><img
                  src="<%= business?.profilePic ? business?.profilePic : '/assets/img/user-icon.webp' %>" alt=""
                  class="dash-img"></a>
              </li>
              <li class="nav-item">
                <button type="button" onclick="deleteCookie('authtoken')" class="logout-btn">
                  LOGOUT <i class="bi bi-box-arrow-left  px-1"></i></button>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <!-- NAVBAR ENDS HERE -->
    <% } else { %>
      <!-- NAVBAR STARTS HERE -->
      <header class="header-main">
        <nav class="main-nav  navbar navbar-expand-lg " data-aos="fade-down" data-aos-duration="3200"
          data-aos-easing="ease-in-sine">
          <div class="container">
            <a class="navbar-brand" href="/">
              <img src="/assets/img/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">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse " id="navbarSupportedContent">
              <ul class="navbar-nav own-navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item px-4">
                  <a class="nav-link" href="/creelio-business">CREERLIO For Bussiness</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/talent">CREERLIO For Talent</a>
                </li>
                <li class="nav-item px-4">
                  <a class="nav-link" href="/features">Features</a>
                </li>
                <li class="nav-item">
                  <div class="dropdown">
                    <button type="button" class="top-btn dropdown-toggle" data-bs-toggle="dropdown"
                      aria-expanded="false">LOGIN</button>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="/user-login">TALENT</a></li>
                      <li><a class="dropdown-item" href="/business-login">BUSINESS</a></li>
                    </ul>
                  </div>
                </li>
                <li class="nav-item">
                  <div class="dropdown">
                    <button class="top-btn dropdown-toggle" type="button" data-bs-toggle="dropdown"
                      aria-expanded="false">
                      SIGN UP
                    </button>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="/join">TALENT</a></li>
                      <li><a class="dropdown-item" href="/businessregistration">BUSINESS</a></li>
                    </ul>
                  </div>
                  <!-- <button type="button" class="top-btn">SIGN UP</button> -->
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </header>
      <!-- NAVBAR ENDS HERE -->
      <% } %>


        <div id="loader">

          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
            <circle fill="none" stroke-opacity="1" stroke="#FF156D" stroke-width=".5" cx="100" cy="100" r="0">
              <animate attributeName="r" calcMode="spline" dur="2" values="1;80" keyTimes="0;1" keySplines="0 .2 .5 1"
                repeatCount="indefinite"></animate>
              <animate attributeName="stroke-width" calcMode="spline" dur="2" values="0;25" keyTimes="0;1"
                keySplines="0 .2 .5 1" repeatCount="indefinite"></animate>
              <animate attributeName="stroke-opacity" calcMode="spline" dur="2" values="1;0" keyTimes="0;1"
                keySplines="0 .2 .5 1" repeatCount="indefinite"></animate>
            </circle>
          </svg>
        </div>