---
import { UserButton, SignInButton, Show } from '@clerk/astro/components'
import logo from "/src/svg/logo/rat_light.svg?raw";
---
<nav class="navbar sticky-top bg-dark shadow" data-bs-theme="dark" aria-label="Main navigation">
  <div class="container align-items-center" id="navContainer">
    <a class="navbar-brand" href="/">
      <span set:html={logo} class="logo-svg d-flex"></span>
    </a>
    <div class="d-flex d-md-none nav-user-btn" id="navUserBtn">
      <Show when="signed-in">
        <UserButton afterSignOutUrl="/" showName={false} />
      </Show>
      <Show when="signed-out">
        <SignInButton asChild mode="modal">
          <button class="btn btn-light">Sign In</button>
        </SignInButton>
      </Show>
      <slot name="navItems"/>      
    </div>
    <div class="d-flex flex-column-reverse flex-md-row search-container" id="searchContainer">
      <slot name="searchInput"/>
      <div class="d-none d-md-flex ms-4 nav-user-btn">
        <Show when="signed-in">
          <UserButton afterSignOutUrl="/" showName={false} />
        </Show>
        <Show when="signed-out">
          <SignInButton asChild mode="modal">
            <button class="btn btn-light">Sign In</button>
          </SignInButton>
        </Show>
        <slot name="navItems"/>
      </div>
    </div>
  </div>
</nav>