<%!-- TODO: replace with OSS version --%>
<nav class="border-b border-slate-900/10 dark:border-slate-300/10" aria-label="Sections">
  <div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 2xl:px-0">
    <div class="flex h-16 justify-between">
      <div class="flex">
        <div class="flex space-x-2 md:space-x-4">
          <.nav_link route={~p"/"} section={:stats} current_section={@current_section}>
            <.icon
              name="hero-chart-pie"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Stats")}
          </.nav_link>
          <.nav_link
            route={~p"/collection"}
            section={:collection}
            current_section={@current_section}
          >
            <.icon
              name="hero-circle-stack"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Collection")}
          </.nav_link>
          <.nav_link route={~p"/wishlist"} section={:wishlist} current_section={@current_section}>
            <.icon
              name="hero-star"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Wishlist")}
          </.nav_link>
        </div>
      </div>
      <div class="flex space-x-2 md:space-x-4 items-center">
        <.universal_search_trigger />
        <.dropdown placement="bottom-end">
          <:toggle>
            <button class="flex items-center text-zinc-500 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200 gap-x-2">
              <div class="text-sm font-semibold ">
                {gettext("More")}
              </div>
              <.icon name="hero-chevron-down" class="h-4 w-4" />
            </button>
          </:toggle>
          <.dropdown_link href={~p"/scrobbled-tracks"}>
            <.icon
              name="hero-musical-note"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Scrobbled Tracks")}
          </.dropdown_link>
          <.dropdown_link href={~p"/scrobble-rules"}>
            <.icon
              name="hero-adjustments-horizontal"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Scrobble Rules")}
          </.dropdown_link>
          <.dropdown_link href={~p"/online-store-templates"}>
            <.icon
              name="hero-building-storefront"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Online Store Templates")}
          </.dropdown_link>
          <.dropdown_link href={~p"/backup"}>
            <.icon
              name="hero-archive-box-arrow-down"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Backup")}
          </.dropdown_link>
          <.dropdown_separator />
          <.dropdown_link href={~p"/dev/dashboard"}>
            <.icon name="hero-chart-bar" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
            {gettext("Live Dashboard")}
          </.dropdown_link>
          <.dropdown_link href={~p"/dev/errors"}>
            <.icon
              name="hero-exclamation-circle"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Errors")}
          </.dropdown_link>
          <.dropdown_link href={~p"/dev/oban"}>
            <.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
            {gettext("Oban")}
          </.dropdown_link>
          <.dropdown_separator />
          <.dropdown_link href={~p"/login"}>
            <.icon
              name="hero-arrow-left-start-on-rectangle"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Logout")}
          </.dropdown_link>
        </.dropdown>
      </div>
    </div>
  </div>
</nav>
<main class="px-4 py-4 max-sm:pb-20 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-screen-2xl">
    <LiveToast.toast_group
      flash={@flash}
      corner={:top_right}
      connected={assigns[:socket] != nil}
      toasts_sync={assigns[:toasts_sync]}
      toast_class_fn={&toast_class_fn/1}
    />
    {@inner_content}
  </div>
</main>

{MusicLibraryWeb.UniversalSearchLive.Index.live(@socket)}
