#load "../lib/app.uce"

COMPONENT(Request& context)
{
	DValue asset_props;
	asset_props["css"]["0"] = "views/themes.css";
	print(component("../components/theme/assets", asset_props, context));
	context.call["app"]["page_title"] = "Themes";
	String current_theme = context.cfg.get_by_path("theme/key").to_string();

	<>
		<div class="theme-gallery-shell">
			<section class="theme-gallery-hero card">
				<span class="theme-gallery-kicker">Starter Theme Gallery</span>
				<h1>Compare Themes</h1>
				<p>Open each theme preview directly to judge shell fit, typography, and token balance.</p>
			</section>
			<div class="theme-gallery-grid">
				<? context.cfg.get_by_path("theme/options").each([&](DValue theme_info, String theme_key) {
					StringMap params;
					params["theme"] = theme_key;
					String preview_href = app_link("theme-preview", params, context);
					StringMap home_params;
					home_params["theme"] = theme_key;
					?><section class="theme-gallery-card<?= theme_key == current_theme ? " is-active" : "" ?>">
						<div class="theme-gallery-head">
							<div>
								<h2><?= theme_info["label"].to_string() ?></h2>
								<p><?= first(theme_info["description"].to_string(), "Reusable starter theme family.") ?></p>
							</div>
							<? if(theme_key == current_theme) { ?><span class="theme-gallery-badge">Active</span><? } ?>
						</div>
						<div class="theme-gallery-actions">
							<a class="btn" href="<?= preview_href ?>">Open Preview</a>
							<a class="btn btn-secondary" href="<?= app_link("", home_params, context) ?>">Open Home</a>
						</div>
					</section><?
				}); ?>
			</div>
		</div>
	</>
}