<%!-- 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-xl px-4 sm:px-6 lg:px-8">
    <div class="flex h-16 justify-between">
      <div class="flex">
        <div class="flex space-x-2 md:space-x-4">
          <.link navigate={~p"/"} class={section_link_classes(assigns[:nav_section], :stats)}>
            <.icon
              name="hero-chart-pie"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Stats")}
          </.link>
          <.link
            navigate={~p"/collection"}
            class={section_link_classes(assigns[:nav_section], :records)}
          >
            <.icon
              name="hero-circle-stack"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Collection")}
          </.link>
          <.link
            navigate={~p"/wishlist"}
            class={section_link_classes(assigns[:nav_section], :wishlist)}
          >
            <.icon
              name="hero-star"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Wishlist")}
          </.link>
        </div>
      </div>
      <div class="flex space-x-2 md:space-x-4">
        <a class={["max-sm:hidden" | nav_link_classes()]} } 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")}
        </a>
        <a class={["max-sm:hidden" | nav_link_classes()]} } href={~p"/dev/errors"}>
          <.icon
            name="hero-exclamation-circle"
            class="h-4 w-4 mr-2"
            aria-hidden="true"
            data-slot="icon"
          />
          {gettext("Errors")}
        </a>
        <a class={["max-sm:hidden" | nav_link_classes()]} } href={~p"/dev/oban"}>
          <.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
          {gettext("Oban")}
        </a>
        <a class={["max-sm:hidden" | nav_link_classes()]} } 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")}
        </a>
        <a class={nav_link_classes()} } 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")}
        </a>
      </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-xl">
    <.flash_group flash={@flash} />
    {@inner_content}
  </div>
</main>
