import { BaseLayout } from "$/ui/base/BaseLayout.tsx";
import { ReleaseCard } from "$/ui/components/ReleaseCard.tsx";
import { SiteHeader } from "$/ui/components/SiteHeader.tsx";
import { CardList } from "$/ui/layouts/CardList.tsx";
import { Container } from "$/ui/layouts/Container.tsx";
import { ActionButton } from "$/ui/objects/ActionButton.tsx";
import { Heading } from "$/ui/objects/Heading.tsx";
import { Icon } from "$/ui/objects/Icon.tsx";
import { PlaceholderBox } from "$/ui/objects/PlaceholderBox.tsx";
import site from "@/corvos.config.ts";

export const template = site.$.template({ type: "releases-index" }, (page, pages) => {
	const query = site.$.query(pages);
	const items = query.type(".html").match({ type: "release" }).many().toArray();
	const feed = query.type(".rss").match({ type: "releases" }).one();

	return (
		<BaseLayout page={page}>
			<SiteHeader
				url={page.url}
				end={
					<div class="l-media__block">
						<ActionButton
							align-block
							class="u-mbs-0"
							href={feed.url}
							icon={<Icon icon="rss-simple" variant="bold" />}
							level="quiet"
							pill
							title="RSS Feed"
						/>
					</div>
				}
				sm={
					<div class="l-media__block l-media__block--main">
						<Heading class="u-mbs-0 u-elp">{page.data.title}</Heading>
					</div>
				}
			></SiteHeader>

			<Container as="main" fixed pad-block pad-inline>
				<CardList keyboard-nav>
					{items.map((item) => (
						<ReleaseCard page={item} heading-level="h2" list />
					))}
					{!items.length && <PlaceholderBox as="em">Nothing there yet</PlaceholderBox>}
				</CardList>
			</Container>
		</BaseLayout>
	);
});