<% if (!includeExamples) { ignoreFile(); return; } %>
import { Link } from '@tanstack/solid-router'
<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'
<% } %>

<%
const demoRoutes = [];
for (const addOn of addOns) {
  for (const route of (addOn?.routes || []).filter((r) => r.url && r.name)) {
    demoRoutes.push({ url: route.url, name: route.name });
    for (const child of route.children || []) {
      if (child?.url && child?.name) {
        demoRoutes.push({ url: child.url, name: child.name });
      }
    }
  }
}
const userHeaders = integrations.filter((i) => i.type === 'header-user');
%>

export default function Header() {
  return (
    <header class="site-header px-4">
      <nav class="page-wrap nav-shell">
        <h2 class="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
          <Link to="/" class="brand-pill">
            <span class="brand-dot" />
            TanStack Start
          </Link>
        </h2>

        <div class="ml-auto flex items-center gap-2">
          <% for (const integration of userHeaders) { %><<%= integration.jsName %> />
          <% } %>
        </div>

        <div class="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-2 sm:w-auto sm:flex-nowrap sm:pb-0">
          <Link to="/" class="nav-link" activeProps={{ class: 'nav-link is-active' }}>
            Home
          </Link>
          <Link to="/about" class="nav-link" activeProps={{ class: 'nav-link is-active' }}>
            About
          </Link>
          <a
            href="https://tanstack.com/start/latest/docs/framework/solid/overview"
            target="_blank"
            rel="noreferrer"
            class="nav-link"
          >
            Docs
          </a>
          <% if (demoRoutes.length > 0) { %><details class="relative w-full sm:w-auto">
            <summary class="nav-link list-none cursor-pointer">Demos</summary>
            <div class="mt-2 min-w-56 rounded-xl border border-[var(--line)] bg-[var(--header-bg)] p-2 shadow-lg sm:absolute sm:right-0">
              <% for (const route of demoRoutes) { %><a
                href="<%= route.url %>"
                class="block rounded-lg px-3 py-2 text-sm text-[var(--sea-ink-soft)] no-underline transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
              >
                <%= route.name %>
              </a>
              <% } %>
            </div>
          </details><% } %>
        </div>
      </nav>
    </header>
  )
}
