package catalog

templ CatalogPage(page Page) {
	<main class="catalog-page">
		<nav class="catalog-nav" aria-label="Catalog navigation">
			<a href="./index.html" class="catalog-home-link">Catalog</a>
			<div class="catalog-nav-links">
				for _, navPage := range Pages() {
					<a
						href={ "./" + navPage.Slug + ".html" }
						class={ catalogNavLinkClass(navPage.Slug == page.Slug) }
					>
						{ navPage.Title }
					</a>
				}
			</div>
		</nav>
		<header class="catalog-page-header">
			<p class="catalog-eyebrow">Design System</p>
			<h1>{ page.Title }</h1>
			<p>{ page.Description }</p>
		</header>
		<div class="catalog-example-list">
			for _, example := range page.Examples {
				<section class="catalog-example">
					<div class="catalog-example-copy">
						<h2>{ example.Title }</h2>
						if example.Description != "" {
							<p>{ example.Description }</p>
						}
					</div>
					<div class="catalog-example-preview">
						@example.Preview
					</div>
					if example.Snippet != "" {
						<pre class="catalog-example-snippet"><code>{ example.Snippet }</code></pre>
					}
				</section>
			}
		</div>
	</main>
}

templ CatalogIndex(pages []Page) {
	<main class="catalog-page">
		<header class="catalog-page-header">
			<p class="catalog-eyebrow">Design System</p>
			<h1>Component Catalog</h1>
			<p>Static documentation generated from the same templ primitives used by the Go application.</p>
		</header>
		<div class="catalog-page-list">
			for _, page := range pages {
				<a href={ "./" + page.Slug + ".html" } class="catalog-page-link-card">
					<h2>{ page.Title }</h2>
					<p>{ page.Description }</p>
					<p class="catalog-page-link">/{ page.Slug }.html</p>
				</a>
			}
		</div>
	</main>
}
