---
import LookupForm from './repo/LookupForm.svelte';
---

<header class="nav">
  <div class="container nav-inner">
    <a class="nav-thing" href="/">
      <span class="thing-name">Hubble</span>
    </a>
    <!-- SSR'd plain GET form; hydrates lazily for the handle typeahead -->
    <LookupForm inputId="nav-did-input" client:idle />
  </div>
</header>

<style>
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: 4rem;
  }

  .nav-thing {
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-thing .thing-name {
    color: var(--color-accent3);
    font-family: var(--font-heading);
    font-size: 1.5rem;
  }
  .nav-thing .thing-name:hover {
    color: var(--color-accent2);
  }
</style>