<style>
 /* Base Nav-Link Styles */
 :root {
    --bg-color: #ffffff;
    --text-color: #000000;
  }
  .dark-mode {
    --bg-color: #1c1c1c;
    --text-color: #ffffff;
  }
  body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
  }
  .bg-dark{
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    }
.nav-link {
    position: relative;
    overflow: hidden;
    color: var(--text-color) !important; /* Default link color */
    transition: color 0.3s ease; /* Smooth color transition */
}

#nav{
  background-color: var(--bg-color) ;
  color: var(--text-color);
}

/* Underline Animation */
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: black;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

/* Special styling for first nav item */
.nav-item:first-child .nav-link::after {
    background-color: #0078d7;
}

/* Hover state for underline animation */
.nav-link:hover::after {
    transform: translateX(0);
}

/* Hover state to change link color */
.nav-link:hover {
    color: #2098D1;
}

/* Ensure all links except the first are black */
.nav-link:not(:first-child) {
    color: black;
}

/* Grow effect for hover */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    transition: transform 0.3s ease;
}

.hvr-grow:hover {
    transform: scale(1.1);
}

/* General hover button/link styling */
[class^="hvr-"] {
    margin: 0.4em;
    padding: 1em;
    cursor: pointer;
    background: #e1e1e1;
    text-decoration: none;
    color: #666;
    font-family: 'Roboto', sans-serif;
}

/* Ensure base anchor tag styling */
a {
    color: #2098D1;
    text-decoration: none;
}

/* Enhanced Styling for Active Links */
.active-link {
    background-color: #f8f9fa;
    border-radius: 5px;
    padding: 5px 10px;
}

/* Hover effect for nav links */
.navbar-nav .nav-link:hover {
    background-color: #e2e6ea;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.nav-link:hover{
  color: black !important;
}

/* Navbar shadow on scroll */
.sticky-top {
    box-shadow: none;
    transition: box-shadow 0.3s ease;
}

/* Add shadow when scrolled */
.sticky-top.scrolled {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.toggleMode{
  width: 25px;
  height: 25px;
}

#darkModeToggle{
  outline: none;
  border: none;
  background: transparent;
}

/* For Sign-Up button */ 
.btn-space {
  min-width: 120px; 
    padding: 0.5rem 1rem; 
    border-radius: 5px;
}

.navbar .btn {
    min-width: 120px; 
    padding: 0.5rem 1rem; 
    border-radius: 5px; 
}

.btn i {
    vertical-align: middle; 
}

@media (max-width: 768px) {
    .navbar .btn {
        flex-grow: 1; 
        margin-bottom: 10px; 
    }
}


</style>
  

<nav
  id="nav"
  class="navbar sticky-top p-2 navbar-expand-lg shadow-sm"
  style=" transition: all 0.3s ease"
>
  <div class="container-fluid">
    <a class="navbar-brand" href="/">
      <img
        id="navbarLogo"
        src="/banner.png"
        alt="Scruter Logo"
        width="90"
        height="30"
        class="d-inline-block align-text-top"
      />
    </a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul id="navbar-links" class="navbar-nav mx-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a
            class="nav-link <%= activeLink === 'home' ? 'active-link' : '' %>"
            href="/"
            ><i class="fa-solid fa-house"></i>  Home Page</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link <%= activeLink === 'house' ? 'active-link' : '' %>"
            href="/house"
            ><i class="fa-solid fa-city"></i> Housing</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link <%= activeLink === 'food' ? 'active-link' : '' %>"
            href="/food"
            ><i class="fa-solid fa-utensils me-2"></i>Food</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link <%= activeLink === 'market' ? 'active-link' : '' %>"
            href="/market"
            ><i class="fa-solid fa-cart-shopping me-2"></i>For Sale</a
          >
        </li>
      </ul>
      <div
        class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center mt-3 mt-lg-0"
      >
        <button id="darkModeToggle" style="margin-right: 10px; ">
          <img src="https://img.icons8.com/?size=100&id=45475&format=png&color=000000" class="toggleMode" id="toggleMode" alt="">
        </button>
        <% if (user) { %>
          <div class="d-flex align-items-start">
            <!-- User Dropdown -->
            <div class="dropdown me-3">
              <button
                class="btn btn-outline-primary dropdown-toggle"
                type="button"
                id="userDropdownMenu"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Welcome, <%= user.username %>!
              </button>
              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdownMenu">
                <li>
                  <div class="dropdown">
                    <button
                      class="btn btn-success dropdown-toggle text-light"
                      type="button"
                      id="createBlogDropdownMenu"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="fa-solid fa-marker me-2"></i>Create Post
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="createBlogDropdownMenu">
                      <li>
                        <a class="dropdown-item" href="/house/form">
                          <i class="fa-solid fa-home me-2"></i>House Ad
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="/food/form">
                          <i class="fa-solid fa-utensils me-2"></i>Food Ad
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="/market/form">
                          <i class="fa-solid fa-store me-2"></i>For Sale Ad
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="/blog/form">
                          <i class="fa-solid fa-blog me-2"></i>Create Blog
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li>
                  <a class="dropdown-item text-danger mt-2" href="/logout">
                    <i class="fa-solid fa-sign-out-alt me-2"></i>Logout
                  </a>
                </li>
              </ul>
            </div>
          </div>
        <% } else { %>
          <a class="btn btn-outline-success" href="/auth?action=login">
            <i class="fa-solid fa-user me-2"></i>Login
          </a>
        <% } %>
      </div>
    </div>
  </div>
</nav>


<script>
  document.addEventListener("DOMContentLoaded", function () {
    const toggleButton = document.getElementById("darkModeToggle");
    const image = document.getElementById("toggleMode");
    const body = document.body;
    const navbar = document.getElementById("nav");
    const logo = document.getElementById("navbarLogo"); // Reference to the logo image
    const footer = document.getElementById("footer");
    let mode = localStorage.getItem("theme") || "light";

    localStorage.setItem("theme", mode);
    console.log(localStorage.getItem("theme"));

    const moon = "https://img.icons8.com/?size=100&id=45475&format=png&color=ffffff";
    const sun = "https://img.icons8.com/?size=100&id=648&format=png&color=000000";

    // Initial setup based on saved theme
    if (mode === "dark") {
      body.classList.add("dark-mode");
      navbar.classList.add("dark-mode")
      if(footer){
        footer.classList.add("dark-mode")
      }
      image.src = moon;
      logo.src = "/banner2.png"; // Change logo for dark mode
    } else {
      image.src = sun;
    }

    // Toggle dark/light mode
    toggleButton.addEventListener("click", function () {
      body.classList.toggle("dark-mode");
      navbar.classList.toggle("dark-mode");
      if(footer){
        footer.classList.toggle("dark-mode");
      }
      mode = mode === "light" ? "dark" : "light";

      if (mode === "dark") {
        localStorage.setItem("theme", "dark");
        image.src = moon;
        logo.src = "/banner2.png"; // Change logo for dark mode
      } else {
        localStorage.setItem("theme", "light");
        image.src = sun;
        logo.src = "/banner.png"; // Revert to original logo for light mode
      }
    });

    // Add shadow to navbar on scroll
    window.addEventListener("scroll", function () {
      const navbar = document.querySelector(".sticky-top");
      if (window.scrollY > 50) {
        navbar.classList.add("scrolled");
      } else {
        navbar.classList.remove("scrolled");
      }
    });

    // Hover functionality for dropdown
    const dropdown = document.querySelector(".dropdown");
    dropdown.addEventListener("mouseenter", () => {
      const dropdownMenu = dropdown.querySelector(".dropdown-menu");
      dropdownMenu.classList.add("show");
    });

    dropdown.addEventListener("mouseleave", () => {
      const dropdownMenu = dropdown.querySelector(".dropdown-menu");
      dropdownMenu.classList.remove("show");
    });
  });
</script>
