<nav class="navbar" id="navbar">
  <a href="#" class="nav-brand">
    <div class="brand-icon">
      <img src="/public/assets/waifuboards.ico" alt="WF Logo">
    </div>
    WaifuBoard
  </a>

  <div class="nav-center">
    <button class="nav-button" data-page="anime" onclick="window.location.href='/anime'">Anime</button>
    <button class="nav-button" data-page="books" onclick="window.location.href='/books'">Books</button>
    <button class="nav-button" data-page="gallery" onclick="window.location.href='/gallery'">Gallery</button>
    <button class="nav-button" data-page="schedule" onclick="window.location.href='/schedule'">Schedule</button>
    <button class="nav-button" data-page="my-list" onclick="window.location.href='/my-list'">My List</button>
    <button class="nav-button" data-page="marketplace" onclick="window.location.href='/marketplace'">Marketplace</button>
  </div>

  <div class="nav-right">
    <div class="search-wrapper">
      <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="8"/>
        <path d="M21 21l-4.35-4.35"/>
      </svg>
      <input type="text" class="search-input" id="search-input" placeholder="Search..." autocomplete="off">
      <div class="search-results" id="search-results"></div>
    </div>

    <div class="nav-user" id="nav-user" style="display:none;">
      <div class="user-avatar-btn">
        <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
        <div class="online-indicator"></div>
      </div>

      <div class="nav-dropdown" id="nav-dropdown">
        <div class="dropdown-header">
          <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
          <div class="dropdown-user-info">
            <div class="dropdown-username" id="nav-username"></div>
          </div>
        </div>

        <button class="dropdown-item" id="nav-settings">
          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="3"/>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.18a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.18a1.65 1.65 0 0 0 1.82-.33 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.37 0 .72-.14 1-.6A1.65 1.65 0 0 0 10.33 2.18V2a2 2 0 1 1 4 0v.18a1.65 1.65 0 0 0 .33 1.82c.28.46.63.6 1 .6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .37.14.72.6 1 .46.28.6.63.6 1z"/>
          </svg>
          <span>Settings</span>
        </button>

        <a href="/my-list" class="dropdown-item">
          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
            <polyline points="17 21 17 13 7 13 7 21"/>
            <polyline points="7 3 7 8 15 8"/>
          </svg>
          <span>My List</span>
        </a>
        <button class="dropdown-item logout-item" id="nav-logout">
          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
            <polyline points="16 17 21 12 16 7"/>
            <line x1="21" y1="12" x2="9" y2="12"/>
          </svg>
          <span>Logout</span>
        </button>
      </div>
    </div>
  </div>
</nav>