---
import { getCollection } from "astro:content"
import Layout from "./layout.astro"
import MainNavigation from "./main-navigation.astro"

const guides = await getCollection("guides")
---

<Layout>
  <div class="isolate">
    <header
      class="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex"
    >
      <div class="container">
        <MainNavigation />
      </div>
    </header>
    <main class="container mt-8 flex items-start gap-4">
      <nav class="w-48 sticky top-24 hidden md:block">
        <h2 class="text-2xl">Guides</h2>
        <ul class="mt-3 flex flex-col gap-2 items-start">
          {
            guides.map((guide) => (
              <li>
                <a class="link" href={`/guides/${guide.slug}`}>
                  {guide.data.title}
                </a>
              </li>
            ))
          }
        </ul>
      </nav>
      <section class="prose prose-invert pb-8 flex-1 min-w-0">
        <slot />
      </section>
    </main>
  </div>
</Layout>