{{ define "navbar" }}
<nav class="sticky top-0 w-full bg-[var(--primary-bg)] shadow-md z-50 transition-all duration-300">
  <div id="navbar-inner" class="max-w-7xl mx-auto flex items-center justify-between px-4 py-3 md:py-4 transition-all duration-300">
    <!-- Logo -->
    <a href="/" class="flex items-start transition-all duration-300" id="logo-container">
      <img src="/static/GORAKLOGO.png" alt="Logo" class="h-12 md:h-16 transition-all duration-300" id="logo-img"/>
      <span class="ml-2 text-[var(--accent)] font-bold text-xl md:text-2xl">Pagerino</span>
    </a>

    <!-- Nav Links -->
    <ul class="hidden md:flex space-x-10 text-[var(--text-primary)] font-semibold">
      <li>
        <a href="/network"
          class="px-4 py-2 rounded-lg hover:bg-[var(--accent)] hover:text-white transition-colors duration-200">
          Network
        </a>
      </li>
      <li>
        <a href="/map"
          class="px-4 py-2 rounded-lg hover:bg-[var(--accent)] hover:text-white transition-colors duration-200">
          Map
        </a>
      </li>
      <li>
        <a href="/analytics"
          class="px-4 py-2 rounded-lg hover:bg-[var(--accent)] hover:text-white transition-colors duration-200">
          Analytics
        </a>
      </li>
    </ul>

    <!-- User / Login -->
    <div class="flex items-center space-x-4">
      {{- if .user.Authorized -}}
      <!-- Logged in -->
      <button id="user-btn" class="hidden md:flex items-center space-x-2 text-[var(--text-primary)] hover:text-[var(--accent)] transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2.2c-3.1 0-9.3 1.6-9.3 4.9v2.4h18.6v-2.4c0-3.3-6.2-4.9-9.3-4.9z"/>
        </svg>
        <span id="username-display">Account</span>
      </button>
      {{- else -}}
      <!-- Logged out -->
      <a id="login-btn" href="/login" class="text-[var(--accent)] font-semibold hover:text-[var(--accent-light)] transition-colors">Login</a>
      {{- end -}}
    </div>

    <!-- Mobile menu button -->
    <button class="md:hidden flex items-center text-[var(--text-primary)]">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>
  </div>
</nav>

<script>
  // Navbar collapsing behaviour
  const logoImg = document.getElementById('logo-img')
  const navbarInner = document.getElementById('navbar-inner')

  let ticking = false;
  window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
        if (window.scrollY > navbarInner.offsetHeight) {
          logoImg.classList.add('h-8', 'md:h-10')
          logoImg.classList.remove('h-12', 'md:h-16')
          navbarInner.classList.add('py-2', 'md:py-3')
          navbarInner.classList.remove('py-3', 'md:py-4')
        } else {
          logoImg.classList.remove('h-8', 'md:h-10')
          logoImg.classList.add('h-12', 'md:h-16')
          navbarInner.classList.remove('py-2', 'md:py-3')
          navbarInner.classList.add('py-3', 'md:py-4')
        }
    
        ticking = false;
      });
      ticking = true;
    }
  });
</script>
{{ end }}