import { n as head_default, o as vue_exports } from "../ssr.js";
import { n as server_renderer_exports, t } from "./i18n-CXLOYfyq.js";
import { t as AppLayout_default } from "./AppLayout-VvVFrkTb.js";
//#region resources/js/Pages/Extensions/Index.vue?vue&type=script&setup=true&lang.ts
var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue_exports.defineComponent)({
	__name: "Index",
	__ssrInlineRender: true,
	props: { items: {} },
	setup(__props) {
		const props = __props;
		const filter = (0, vue_exports.ref)("all");
		const query = (0, vue_exports.ref)("");
		const counts = (0, vue_exports.computed)(() => ({
			all: props.items.length,
			extension: props.items.filter((e) => e.type === "extension").length,
			theme: props.items.filter((e) => e.type === "theme").length
		}));
		const pills = [
			{
				key: "all",
				label: t("All")
			},
			{
				key: "extension",
				label: t("Extensions")
			},
			{
				key: "theme",
				label: t("Themes")
			}
		];
		const visible = (0, vue_exports.computed)(() => {
			const q = query.value.trim().toLowerCase();
			return props.items.filter((e) => {
				if (filter.value !== "all" && e.type !== filter.value) return false;
				if (!q) return true;
				return [
					e.name,
					e.description,
					e.author,
					e.id
				].some((v) => (v || "").toLowerCase().includes(q));
			});
		});
		function priceLabel(item) {
			if (!item.premium) return t("Free");
			const n = Number(item.price);
			return n > 0 ? `$${n}` : t("Premium");
		}
		const TILE_ACCENTS = [
			"bg-rose-500/15 text-rose-500",
			"bg-sky-500/15 text-sky-500",
			"bg-emerald-500/15 text-emerald-500",
			"bg-amber-500/15 text-amber-500",
			"bg-violet-500/15 text-violet-500",
			"bg-fuchsia-500/15 text-fuchsia-500",
			"bg-cyan-500/15 text-cyan-500",
			"bg-indigo-500/15 text-indigo-500"
		];
		function tileAccent(item) {
			const key = String(item.id || item.name || "");
			let h = 0;
			for (let i = 0; i < key.length; i++) h = h * 31 + key.charCodeAt(i) >>> 0;
			return TILE_ACCENTS[h % TILE_ACCENTS.length];
		}
		return (_ctx, _push, _parent, _attrs) => {
			_push(`<!--[-->`);
			_push((0, server_renderer_exports.ssrRenderComponent)((0, vue_exports.unref)(head_default), { title: (0, vue_exports.unref)(t)("Extensions & Themes") }, null, _parent));
			_push((0, server_renderer_exports.ssrRenderComponent)(AppLayout_default, null, {
				default: (0, vue_exports.withCtx)((_, _push, _parent, _scopeId) => {
					if (_push) {
						_push(`<div class="mx-auto max-w-[var(--c-container)]"${_scopeId}><header class="mb-6 rounded-c border border-line bg-surface p-7 sm:p-9"${_scopeId}><h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Extensions & Themes"))}</h1><p class="mt-2 max-w-2xl text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Extend your community — add features and reskin it with one click. Free and premium add-ons, all built for Convoro."))}</p></header><div class="mb-5 flex flex-wrap items-center gap-3"${_scopeId}><div class="flex items-center gap-1 rounded-c border border-line bg-surface p-1"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(pills, (p) => {
							_push(`<button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([filter.value === p.key ? "bg-primary text-white" : "text-ink-2 hover:bg-surface-2", "rounded-lg px-3 py-1.5 text-sm font-semibold transition"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(p.label)} <span class="opacity-70"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(counts.value[p.key])}</span></button>`);
						});
						_push(`<!--]--></div><div class="ml-auto flex items-center gap-2 rounded-full border border-line bg-surface px-4 py-2"${_scopeId}><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-ink-muted"${_scopeId}><circle cx="11" cy="11" r="7"${_scopeId}></circle><path d="m21 21-4.3-4.3"${_scopeId}></path></svg><input${(0, server_renderer_exports.ssrRenderAttr)("value", query.value)} type="search"${(0, server_renderer_exports.ssrRenderAttr)("placeholder", (0, vue_exports.unref)(t)("Search add-ons…"))} class="w-48 border-0 bg-transparent p-0 text-sm text-ink placeholder:text-ink-muted focus:ring-0"${_scopeId}></div></div>`);
						if (!visible.value.length) _push(`<div class="rounded-c border border-dashed border-line bg-surface p-12 text-center text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Nothing here yet — check back soon."))}</div>`);
						else {
							_push(`<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3"${_scopeId}><!--[-->`);
							(0, server_renderer_exports.ssrRenderList)(visible.value, (item) => {
								_push(`<article class="flex flex-col rounded-c border border-line bg-surface p-6 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"${_scopeId}><div class="flex items-start gap-3"${_scopeId}><div class="${(0, server_renderer_exports.ssrRenderClass)([tileAccent(item), "grid h-12 w-12 shrink-0 place-items-center rounded-xl text-xl"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(item.type === "theme" ? "🎨" : "🧩")}</div><div class="min-w-0 flex-1"${_scopeId}><h3 class="truncate text-lg font-bold leading-tight"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(item.name)}</h3><p class="text-xs text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(item.author || "Convoro")} · ${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("v{version}", { version: item.version }))}</p></div></div><p class="mt-3 line-clamp-3 flex-1 text-sm text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(item.description)}</p><div class="mt-4 flex items-center gap-2 border-t border-line pt-4"${_scopeId}><span class="${(0, server_renderer_exports.ssrRenderClass)([item.type === "theme" ? "bg-fuchsia-500/15 text-fuchsia-600" : "bg-primary/15 text-primary", "rounded-full px-2.5 py-0.5 text-xs font-semibold"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(item.type)}</span>`);
								if (item.active) _push(`<span class="rounded-full bg-emerald-500/15 px-2.5 py-0.5 text-xs font-semibold text-emerald-600"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Active"))}</span>`);
								else _push(`<!---->`);
								_push(`<span class="${(0, server_renderer_exports.ssrRenderClass)([item.premium ? "text-amber-600" : "text-ink-muted", "ml-auto text-sm font-extrabold"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(priceLabel(item))}</span></div></article>`);
							});
							_push(`<!--]--></div>`);
						}
						_push(`<p class="mt-8 text-center text-sm text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("More free & premium add-ons are coming to the Convoro store. Built something? Developer docs are on the way."))}</p></div>`);
					} else return [(0, vue_exports.createVNode)("div", { class: "mx-auto max-w-[var(--c-container)]" }, [
						(0, vue_exports.createVNode)("header", { class: "mb-6 rounded-c border border-line bg-surface p-7 sm:p-9" }, [(0, vue_exports.createVNode)("h1", { class: "text-3xl font-extrabold tracking-tight sm:text-4xl" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Extensions & Themes")), 1), (0, vue_exports.createVNode)("p", { class: "mt-2 max-w-2xl text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Extend your community — add features and reskin it with one click. Free and premium add-ons, all built for Convoro.")), 1)]),
						(0, vue_exports.createVNode)("div", { class: "mb-5 flex flex-wrap items-center gap-3" }, [(0, vue_exports.createVNode)("div", { class: "flex items-center gap-1 rounded-c border border-line bg-surface p-1" }, [((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(pills, (p) => {
							return (0, vue_exports.createVNode)("button", {
								key: p.key,
								type: "button",
								onClick: ($event) => filter.value = p.key,
								class: ["rounded-lg px-3 py-1.5 text-sm font-semibold transition", filter.value === p.key ? "bg-primary text-white" : "text-ink-2 hover:bg-surface-2"]
							}, [(0, vue_exports.createTextVNode)((0, vue_exports.toDisplayString)(p.label) + " ", 1), (0, vue_exports.createVNode)("span", { class: "opacity-70" }, (0, vue_exports.toDisplayString)(counts.value[p.key]), 1)], 10, ["onClick"]);
						}), 64))]), (0, vue_exports.createVNode)("div", { class: "ml-auto flex items-center gap-2 rounded-full border border-line bg-surface px-4 py-2" }, [((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("svg", {
							width: "16",
							height: "16",
							viewBox: "0 0 24 24",
							fill: "none",
							stroke: "currentColor",
							"stroke-width": "2",
							class: "text-ink-muted"
						}, [(0, vue_exports.createVNode)("circle", {
							cx: "11",
							cy: "11",
							r: "7"
						}), (0, vue_exports.createVNode)("path", { d: "m21 21-4.3-4.3" })])), (0, vue_exports.withDirectives)((0, vue_exports.createVNode)("input", {
							"onUpdate:modelValue": ($event) => query.value = $event,
							type: "search",
							placeholder: (0, vue_exports.unref)(t)("Search add-ons…"),
							class: "w-48 border-0 bg-transparent p-0 text-sm text-ink placeholder:text-ink-muted focus:ring-0"
						}, null, 8, ["onUpdate:modelValue", "placeholder"]), [[vue_exports.vModelText, query.value]])])]),
						!visible.value.length ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("div", {
							key: 0,
							class: "rounded-c border border-dashed border-line bg-surface p-12 text-center text-ink-muted"
						}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Nothing here yet — check back soon.")), 1)) : ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("div", {
							key: 1,
							class: "grid gap-5 sm:grid-cols-2 lg:grid-cols-3"
						}, [((0, vue_exports.openBlock)(true), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(visible.value, (item) => {
							return (0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("article", {
								key: item.id,
								class: "flex flex-col rounded-c border border-line bg-surface p-6 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"
							}, [
								(0, vue_exports.createVNode)("div", { class: "flex items-start gap-3" }, [(0, vue_exports.createVNode)("div", { class: ["grid h-12 w-12 shrink-0 place-items-center rounded-xl text-xl", tileAccent(item)] }, (0, vue_exports.toDisplayString)(item.type === "theme" ? "🎨" : "🧩"), 3), (0, vue_exports.createVNode)("div", { class: "min-w-0 flex-1" }, [(0, vue_exports.createVNode)("h3", { class: "truncate text-lg font-bold leading-tight" }, (0, vue_exports.toDisplayString)(item.name), 1), (0, vue_exports.createVNode)("p", { class: "text-xs text-ink-muted" }, (0, vue_exports.toDisplayString)(item.author || "Convoro") + " · " + (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("v{version}", { version: item.version })), 1)])]),
								(0, vue_exports.createVNode)("p", { class: "mt-3 line-clamp-3 flex-1 text-sm text-ink-2" }, (0, vue_exports.toDisplayString)(item.description), 1),
								(0, vue_exports.createVNode)("div", { class: "mt-4 flex items-center gap-2 border-t border-line pt-4" }, [
									(0, vue_exports.createVNode)("span", { class: ["rounded-full px-2.5 py-0.5 text-xs font-semibold", item.type === "theme" ? "bg-fuchsia-500/15 text-fuchsia-600" : "bg-primary/15 text-primary"] }, (0, vue_exports.toDisplayString)(item.type), 3),
									item.active ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("span", {
										key: 0,
										class: "rounded-full bg-emerald-500/15 px-2.5 py-0.5 text-xs font-semibold text-emerald-600"
									}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Active")), 1)) : (0, vue_exports.createCommentVNode)("", true),
									(0, vue_exports.createVNode)("span", { class: ["ml-auto text-sm font-extrabold", item.premium ? "text-amber-600" : "text-ink-muted"] }, (0, vue_exports.toDisplayString)(priceLabel(item)), 3)
								])
							]);
						}), 128))])),
						(0, vue_exports.createVNode)("p", { class: "mt-8 text-center text-sm text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("More free & premium add-ons are coming to the Convoro store. Built something? Developer docs are on the way.")), 1)
					])];
				}),
				_: 1
			}, _parent));
			_push(`<!--]-->`);
		};
	}
});
//#endregion
//#region resources/js/Pages/Extensions/Index.vue
var _sfc_setup = Index_vue_vue_type_script_setup_true_lang_default.setup;
Index_vue_vue_type_script_setup_true_lang_default.setup = (props, ctx) => {
	const ssrContext = (0, vue_exports.useSSRContext)();
	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("resources/js/Pages/Extensions/Index.vue");
	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
var Index_default = Index_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { Index_default as default };
