import { a as usePage, i as useForm, n as head_default, o as vue_exports, r as link_default, s as router } 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/Components/panel/UsageChart.vue?vue&type=script&setup=true&lang.ts
var W = 600;
var UsageChart_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue_exports.defineComponent)({
	__name: "UsageChart",
	__ssrInlineRender: true,
	props: {
		points: {},
		label: {},
		kind: { default: "number" },
		color: { default: "#5b5bd6" },
		height: { default: 150 }
	},
	setup(__props) {
		const props = __props;
		const H = (0, vue_exports.computed)(() => props.height);
		const PAD = {
			l: 8,
			r: 8,
			t: 12,
			b: 4
		};
		const vals = (0, vue_exports.computed)(() => props.points.map((p) => p.value));
		const maxV = (0, vue_exports.computed)(() => Math.max(1, ...vals.value));
		const minV = (0, vue_exports.computed)(() => Math.min(0, ...vals.value));
		function x(i) {
			const n = props.points.length;
			if (n <= 1) return PAD.l;
			return PAD.l + i / (n - 1) * (W - PAD.l - PAD.r);
		}
		function y(v) {
			const span = maxV.value - minV.value || 1;
			return PAD.t + (1 - (v - minV.value) / span) * (H.value - PAD.t - PAD.b);
		}
		const linePath = (0, vue_exports.computed)(() => props.points.map((p, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(p.value).toFixed(1)}`).join(" "));
		const areaPath = (0, vue_exports.computed)(() => {
			if (!props.points.length) return "";
			return `${props.points.map((p, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(p.value).toFixed(1)}`).join(" ")} L${x(props.points.length - 1).toFixed(1)},${(H.value - PAD.b).toFixed(1)} L${x(0).toFixed(1)},${(H.value - PAD.b).toFixed(1)} Z`;
		});
		function fmt(v) {
			if (props.kind === "bytes") {
				const u = [
					"B",
					"KB",
					"MB",
					"GB",
					"TB"
				];
				let i = 0;
				let n = v;
				while (n >= 1024 && i < u.length - 1) {
					n /= 1024;
					i++;
				}
				return `${n.toFixed(n < 10 && i > 0 ? 1 : 0)} ${u[i]}`;
			}
			if (props.kind === "ms") return `${Math.round(v)} ms`;
			if (props.kind === "percent") return `${v.toFixed(0)}%`;
			if (v >= 1e3) return `${(v / 1e3).toFixed(v < 1e4 ? 1 : 0)}k`;
			return `${Math.round(v)}`;
		}
		const last = (0, vue_exports.computed)(() => vals.value.length ? vals.value[vals.value.length - 1] : 0);
		const uid = Math.round(x(0) * 1e3) + props.label.length;
		const hover = (0, vue_exports.ref)(null);
		const hoverLabel = (0, vue_exports.computed)(() => {
			if (hover.value == null || !props.points[hover.value]) return null;
			const p = props.points[hover.value];
			const d = new Date(p.t);
			return {
				value: fmt(p.value),
				when: d.toLocaleString(void 0, {
					month: "short",
					day: "numeric",
					hour: "numeric"
				}),
				x: x(hover.value),
				y: y(p.value)
			};
		});
		return (_ctx, _push, _parent, _attrs) => {
			_push(`<div${(0, server_renderer_exports.ssrRenderAttrs)(_attrs)}><div class="mb-1 flex items-baseline justify-between"><span class="text-xs font-semibold text-ink-muted">${(0, server_renderer_exports.ssrInterpolate)(__props.label)}</span><span class="text-sm font-bold text-ink">${(0, server_renderer_exports.ssrInterpolate)(fmt(last.value))}<span class="ml-1 text-xs font-normal text-ink-muted">now</span></span></div><svg${(0, server_renderer_exports.ssrRenderAttr)("viewBox", `0 0 ${W} ${H.value}`)} class="w-full" preserveAspectRatio="none" style="${(0, server_renderer_exports.ssrRenderStyle)({ height: H.value + "px" })}"><defs><linearGradient${(0, server_renderer_exports.ssrRenderAttr)("id", `g${uid}`)} x1="0" y1="0" x2="0" y2="1"><stop offset="0%"${(0, server_renderer_exports.ssrRenderAttr)("stop-color", __props.color)} stop-opacity="0.28"></stop><stop offset="100%"${(0, server_renderer_exports.ssrRenderAttr)("stop-color", __props.color)} stop-opacity="0"></stop></linearGradient></defs><!--[-->`);
			(0, server_renderer_exports.ssrRenderList)([
				.25,
				.5,
				.75
			], (g) => {
				_push(`<line${(0, server_renderer_exports.ssrRenderAttr)("x1", PAD.l)}${(0, server_renderer_exports.ssrRenderAttr)("x2", W - PAD.r)}${(0, server_renderer_exports.ssrRenderAttr)("y1", PAD.t + g * (H.value - PAD.t - PAD.b))}${(0, server_renderer_exports.ssrRenderAttr)("y2", PAD.t + g * (H.value - PAD.t - PAD.b))} stroke="currentColor" class="text-line" stroke-width="1" stroke-dasharray="3 4" opacity="0.5"></line>`);
			});
			_push(`<!--]-->`);
			if (__props.points.length) _push(`<path${(0, server_renderer_exports.ssrRenderAttr)("d", areaPath.value)}${(0, server_renderer_exports.ssrRenderAttr)("fill", `url(#g${uid})`)}></path>`);
			else _push(`<!---->`);
			if (__props.points.length) _push(`<path${(0, server_renderer_exports.ssrRenderAttr)("d", linePath.value)}${(0, server_renderer_exports.ssrRenderAttr)("stroke", __props.color)} stroke-width="2" fill="none" vector-effect="non-scaling-stroke" stroke-linejoin="round"></path>`);
			else _push(`<!---->`);
			if (hoverLabel.value) _push(`<g><line${(0, server_renderer_exports.ssrRenderAttr)("x1", hoverLabel.value.x)}${(0, server_renderer_exports.ssrRenderAttr)("x2", hoverLabel.value.x)}${(0, server_renderer_exports.ssrRenderAttr)("y1", PAD.t)}${(0, server_renderer_exports.ssrRenderAttr)("y2", H.value - PAD.b)}${(0, server_renderer_exports.ssrRenderAttr)("stroke", __props.color)} stroke-width="1" opacity="0.4"></line><circle${(0, server_renderer_exports.ssrRenderAttr)("cx", hoverLabel.value.x)}${(0, server_renderer_exports.ssrRenderAttr)("cy", hoverLabel.value.y)} r="3.5"${(0, server_renderer_exports.ssrRenderAttr)("fill", __props.color)}></circle></g>`);
			else _push(`<!---->`);
			if (!__props.points.length) _push(`<text${(0, server_renderer_exports.ssrRenderAttr)("x", W / 2)}${(0, server_renderer_exports.ssrRenderAttr)("y", H.value / 2)} text-anchor="middle" class="fill-current text-ink-muted" font-size="13">no data yet</text>`);
			else _push(`<!---->`);
			_push(`</svg>`);
			if (hoverLabel.value) _push(`<div class="mt-0.5 text-right text-[11px] text-ink-muted">${(0, server_renderer_exports.ssrInterpolate)(hoverLabel.value.value)} · ${(0, server_renderer_exports.ssrInterpolate)(hoverLabel.value.when)}</div>`);
			else _push(`<!---->`);
			_push(`</div>`);
		};
	}
});
//#endregion
//#region resources/js/Components/panel/UsageChart.vue
var _sfc_setup$1 = UsageChart_vue_vue_type_script_setup_true_lang_default.setup;
UsageChart_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/Components/panel/UsageChart.vue");
	return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
var UsageChart_default = UsageChart_vue_vue_type_script_setup_true_lang_default;
//#endregion
//#region resources/js/Pages/PanelManage.vue?vue&type=script&setup=true&lang.ts
var PanelManage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue_exports.defineComponent)({
	__name: "PanelManage",
	__ssrInlineRender: true,
	props: {
		community: {},
		billing: {},
		domain: {},
		snapshot: {},
		series: {},
		range: {}
	},
	setup(__props) {
		const props = __props;
		const flash = (0, vue_exports.computed)(() => usePage().props.flash?.status);
		const tabs = [
			{
				key: "overview",
				label: t("Overview")
			},
			{
				key: "resources",
				label: t("Resources")
			},
			{
				key: "billing",
				label: t("Billing")
			},
			{
				key: "domain",
				label: t("Domain")
			}
		];
		const tab = (0, vue_exports.ref)("overview");
		function bytes(v) {
			if (!v) return "0 B";
			const u = [
				"B",
				"KB",
				"MB",
				"GB",
				"TB"
			];
			let i = 0;
			let n = v;
			while (n >= 1024 && i < u.length - 1) {
				n /= 1024;
				i++;
			}
			return `${n.toFixed(n < 10 && i > 0 ? 1 : 0)} ${u[i]}`;
		}
		function num(v) {
			return v >= 1e3 ? `${(v / 1e3).toFixed(1)}k` : `${Math.round(v || 0)}`;
		}
		function pct(used, total) {
			return Math.min(100, Math.round(used / Math.max(1, total) * 100));
		}
		const liveSeries = (0, vue_exports.ref)(props.series);
		const liveRange = (0, vue_exports.ref)(props.range);
		const loading = (0, vue_exports.ref)(false);
		async function loadRange(r) {
			liveRange.value = r;
			loading.value = true;
			try {
				liveSeries.value = (await (await fetch(`/panel/communities/${props.community.id}/metrics?range=${r}`, {
					headers: { Accept: "application/json" },
					credentials: "same-origin"
				})).json()).series;
			} finally {
				loading.value = false;
			}
		}
		const charts = [
			{
				label: t("Storage (database + uploads)"),
				key: "storageBytes",
				kind: "bytes",
				color: "#5b5bd6"
			},
			{
				label: t("Requests"),
				key: "requests",
				kind: "number",
				color: "#0ea5e9"
			},
			{
				label: t("Redis memory"),
				key: "redisBytes",
				kind: "bytes",
				color: "#e8830c"
			},
			{
				label: t("Horizon jobs processed"),
				key: "jobs",
				kind: "number",
				color: "#16a34a"
			},
			{
				label: t("CPU"),
				key: "cpu",
				kind: "percent",
				color: "#dc2626"
			},
			{
				label: t("Avg response time"),
				key: "respMs",
				kind: "ms",
				color: "#7c3aed"
			}
		];
		function pointsFor(key) {
			return liveSeries.value.map((s) => ({
				t: s.t,
				value: s[key] ?? 0
			}));
		}
		const domainForm = useForm({ custom_domain: props.domain.custom ?? "" });
		function saveDomain() {
			domainForm.put(`/panel/communities/${props.community.id}/domain`, { preserveScroll: true });
		}
		function verifyDomain() {
			router.post(`/panel/communities/${props.community.id}/domain/verify`, {}, { preserveScroll: true });
		}
		const copied = (0, vue_exports.ref)("");
		async function copy(text, what) {
			try {
				await navigator.clipboard.writeText(text);
				copied.value = what;
				setTimeout(() => copied.value = "", 1500);
			} catch {}
		}
		function manageBilling() {
			router.post(`/panel/communities/${props.community.id}/billing-portal`, {}, { preserveScroll: true });
		}
		const invoices = (0, vue_exports.computed)(() => {
			const out = [];
			for (let i = 1; i <= 3; i++) {
				const d = /* @__PURE__ */ new Date();
				d.setMonth(d.getMonth() - i);
				out.push({
					date: d.toLocaleDateString(void 0, {
						month: "short",
						day: "numeric",
						year: "numeric"
					}),
					amount: props.billing.price,
					status: "Paid"
				});
			}
			return out;
		});
		const statusTone = {
			active: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
			past_due: "bg-red-500/15 text-red-600 dark:text-red-400",
			trialing: "bg-sky-500/15 text-sky-600 dark:text-sky-400",
			provisioning: "bg-amber-500/15 text-amber-600 dark:text-amber-400"
		};
		return (_ctx, _push, _parent, _attrs) => {
			_push(`<!--[-->`);
			_push((0, server_renderer_exports.ssrRenderComponent)((0, vue_exports.unref)(head_default), { title: `${__props.community.name} — ${(0, vue_exports.unref)(t)("Hosting")}` }, 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-5xl px-4 py-7"${_scopeId}>`);
						_push((0, server_renderer_exports.ssrRenderComponent)((0, vue_exports.unref)(link_default), {
							href: "/panel",
							class: "text-sm font-semibold text-ink-muted hover:text-ink"
						}, {
							default: (0, vue_exports.withCtx)((_, _push, _parent, _scopeId) => {
								if (_push) _push(`← ${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Communities"))}`);
								else return [(0, vue_exports.createTextVNode)("← " + (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Communities")), 1)];
							}),
							_: 1
						}, _parent, _scopeId));
						_push(`<div class="mt-2 flex flex-wrap items-center justify-between gap-3"${_scopeId}><div${_scopeId}><h1 class="text-2xl font-extrabold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.community.name)}</h1><a${(0, server_renderer_exports.ssrRenderAttr)("href", __props.community.url)} target="_blank" class="text-sm text-primary hover:underline"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.community.url)}</a></div><div class="flex items-center gap-2"${_scopeId}><span class="${(0, server_renderer_exports.ssrRenderClass)([statusTone[__props.community.status] || "bg-line text-ink-2", "rounded-full px-2.5 py-1 text-xs font-bold capitalize"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.community.status)}</span><form${_scopeId}><button class="rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Open admin"))}</button></form></div></div>`);
						if (flash.value) _push(`<div class="mt-4 rounded-xl border border-primary/30 bg-primary/10 px-4 py-2.5 text-sm font-medium text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(flash.value)}</div>`);
						else _push(`<!---->`);
						_push(`<div class="mt-6 flex gap-1 border-b border-line"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(tabs, (x) => {
							_push(`<button class="${(0, server_renderer_exports.ssrRenderClass)([tab.value === x.key ? "border-primary text-ink" : "border-transparent text-ink-muted hover:text-ink", "-mb-px border-b-2 px-4 py-2.5 text-sm font-semibold"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(x.label)}</button>`);
						});
						_push(`<!--]--></div><section class="mt-6 space-y-5" style="${(0, server_renderer_exports.ssrRenderStyle)(tab.value === "overview" ? null : { display: "none" })}"${_scopeId}><div class="grid grid-cols-2 gap-3 sm:grid-cols-4"${_scopeId}><div class="rounded-2xl border border-line bg-surface p-4"${_scopeId}><div class="text-xs font-semibold text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Members"))}</div><div class="mt-1 text-2xl font-black text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(num(__props.snapshot.members))}</div></div><div class="rounded-2xl border border-line bg-surface p-4"${_scopeId}><div class="text-xs font-semibold text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Storage used"))}</div><div class="mt-1 text-2xl font-black text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(bytes(__props.snapshot.storageBytes))}</div></div><div class="rounded-2xl border border-line bg-surface p-4"${_scopeId}><div class="text-xs font-semibold text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Requests (24h)"))}</div><div class="mt-1 text-2xl font-black text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(num(__props.snapshot.requests24h))}</div></div><div class="rounded-2xl border border-line bg-surface p-4"${_scopeId}><div class="text-xs font-semibold text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Avg response"))}</div><div class="mt-1 text-2xl font-black text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.snapshot.respMs)} ms</div></div></div><div class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><h2 class="text-sm font-bold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Plan usage"))}</h2><div class="mt-4 space-y-4"${_scopeId}><div${_scopeId}><div class="flex justify-between text-xs"${_scopeId}><span class="font-semibold text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Storage"))}</span><span class="text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(bytes(__props.snapshot.storageBytes))} / ${(0, server_renderer_exports.ssrInterpolate)(bytes(__props.snapshot.quota.storageBytes))}</span></div><div class="mt-1.5 h-2 overflow-hidden rounded-full bg-appbg"${_scopeId}><div class="h-full rounded-full bg-primary" style="${(0, server_renderer_exports.ssrRenderStyle)({ width: pct(__props.snapshot.storageBytes, __props.snapshot.quota.storageBytes) + "%" })}"${_scopeId}></div></div></div><div${_scopeId}><div class="flex justify-between text-xs"${_scopeId}><span class="font-semibold text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Members"))}</span><span class="text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(num(__props.snapshot.members))}`);
						if (__props.snapshot.quota.members) _push(`<!--[--> / ${(0, server_renderer_exports.ssrInterpolate)(num(__props.snapshot.quota.members))}<!--]-->`);
						else _push(`<!--[--> · ${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Unlimited"))}<!--]-->`);
						_push(`</span></div><div class="mt-1.5 h-2 overflow-hidden rounded-full bg-appbg"${_scopeId}><div class="h-full rounded-full bg-sky-500" style="${(0, server_renderer_exports.ssrRenderStyle)({
							width: (__props.snapshot.quota.members ? pct(__props.snapshot.members, __props.snapshot.quota.members) : 100) + "%",
							opacity: __props.snapshot.quota.members ? 1 : .25
						})}"${_scopeId}></div></div></div><div${_scopeId}><div class="flex justify-between text-xs"${_scopeId}><span class="font-semibold text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Bandwidth (30d)"))}</span><span class="text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(bytes(__props.snapshot.bandwidth30dBytes))}`);
						if (__props.snapshot.quota.bandwidthGb) _push(`<!--[--> / ${(0, server_renderer_exports.ssrInterpolate)(__props.snapshot.quota.bandwidthGb)} GB<!--]-->`);
						else _push(`<!--[--> · ${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Unlimited"))}<!--]-->`);
						_push(`</span></div><div class="mt-1.5 h-2 overflow-hidden rounded-full bg-appbg"${_scopeId}><div class="h-full rounded-full bg-amber-500" style="${(0, server_renderer_exports.ssrRenderStyle)({
							width: (__props.snapshot.quota.bandwidthGb ? pct(__props.snapshot.bandwidth30dBytes, __props.snapshot.quota.bandwidthGb * 1024 * 1024 * 1024) : 100) + "%",
							opacity: __props.snapshot.quota.bandwidthGb ? 1 : .25
						})}"${_scopeId}></div></div></div></div></div><div class="grid gap-3 sm:grid-cols-2"${_scopeId}><div class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><div class="text-xs font-semibold text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Plan"))}</div><div class="mt-1 flex items-baseline gap-2"${_scopeId}><span class="text-xl font-black text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.billing.plan)}</span><span class="text-sm text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.billing.price)}/${(0, server_renderer_exports.ssrInterpolate)(__props.billing.interval)}</span></div><p class="mt-2 text-sm text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Next payment"))}: <b${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.billing.nextPaymentDate)}</b> `);
						if (__props.billing.nextPaymentInDays != null) _push(`<span class="text-ink-muted"${_scopeId}>(${(0, server_renderer_exports.ssrInterpolate)(__props.billing.nextPaymentInDays)} ${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("days"))})</span>`);
						else _push(`<!---->`);
						_push(`</p></div><div class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><div class="text-xs font-semibold text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Live snapshot"))}</div><div class="mt-2 grid grid-cols-2 gap-y-1.5 text-sm"${_scopeId}><span class="text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("CPU"))}</span><span class="text-right font-semibold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.snapshot.cpu)}%</span><span class="text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Redis"))}</span><span class="text-right font-semibold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(bytes(__props.snapshot.redisBytes))}</span><span class="text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Queue depth"))}</span><span class="text-right font-semibold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.snapshot.queueDepth)}</span><span class="text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Database"))}</span><span class="text-right font-semibold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(bytes(__props.snapshot.dbBytes))}</span></div></div></div></section><section class="mt-6" style="${(0, server_renderer_exports.ssrRenderStyle)(tab.value === "resources" ? null : { display: "none" })}"${_scopeId}><div class="flex items-center justify-between"${_scopeId}><h2 class="text-sm font-bold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Usage over time"))}</h2><div class="flex rounded-lg border border-line p-0.5"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)([
							"24h",
							"7d",
							"30d"
						], (r) => {
							_push(`<button class="${(0, server_renderer_exports.ssrRenderClass)([liveRange.value === r ? "bg-primary text-white" : "text-ink-muted hover:text-ink", "rounded-md px-3 py-1 text-xs font-bold"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(r)}</button>`);
						});
						_push(`<!--]--></div></div><div class="${(0, server_renderer_exports.ssrRenderClass)([loading.value ? "opacity-50" : "", "mt-4 grid gap-4 sm:grid-cols-2"])}"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(charts, (c) => {
							_push(`<div class="rounded-2xl border border-line bg-surface p-4"${_scopeId}>`);
							_push((0, server_renderer_exports.ssrRenderComponent)(UsageChart_default, {
								points: pointsFor(c.key),
								label: c.label,
								kind: c.kind,
								color: c.color
							}, null, _parent, _scopeId));
							_push(`</div>`);
						});
						_push(`<!--]--></div></section><section class="mt-6 space-y-5" style="${(0, server_renderer_exports.ssrRenderStyle)(tab.value === "billing" ? null : { display: "none" })}"${_scopeId}><div class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><div class="flex flex-wrap items-start justify-between gap-4"${_scopeId}><div${_scopeId}><div class="flex items-center gap-2"${_scopeId}><span class="text-xl font-black text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.billing.plan)}</span><span class="${(0, server_renderer_exports.ssrRenderClass)([statusTone[__props.billing.status] || "bg-line text-ink-2", "rounded-full px-2 py-0.5 text-xs font-bold capitalize"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.billing.status)}</span></div><p class="mt-1 text-sm text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.billing.price)} / ${(0, server_renderer_exports.ssrInterpolate)(__props.billing.interval)}</p><p class="mt-3 text-sm text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Current cycle renews"))} <b${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.billing.nextPaymentDate)}</b></p><p class="text-sm text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Next charge"))}: <b${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.billing.price)}</b></p>`);
						if (__props.billing.card) _push(`<p class="mt-2 text-sm text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Card on file"))}: ${(0, server_renderer_exports.ssrInterpolate)(__props.billing.card.brand)} ···· ${(0, server_renderer_exports.ssrInterpolate)(__props.billing.card.last4)}</p>`);
						else _push(`<!---->`);
						_push(`</div><button class="rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Manage billing"))}</button></div></div><div class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><h3 class="text-sm font-bold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Recent invoices"))}</h3><ul class="mt-3 divide-y divide-line"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(invoices.value, (inv, i) => {
							_push(`<li class="flex items-center justify-between py-2.5 text-sm"${_scopeId}><span class="text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(inv.date)}</span><span class="flex items-center gap-3"${_scopeId}><span class="font-semibold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(inv.amount)}</span><span class="rounded-full bg-emerald-500/15 px-2 py-0.5 text-xs font-bold text-emerald-600 dark:text-emerald-400"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(inv.status)}</span></span></li>`);
						});
						_push(`<!--]--></ul></div></section><section class="mt-6 space-y-5" style="${(0, server_renderer_exports.ssrRenderStyle)(tab.value === "domain" ? null : { display: "none" })}"${_scopeId}><div class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><h3 class="text-sm font-bold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Convoro subdomain"))}</h3><p class="mt-1 text-xs text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Always available, HTTPS included."))}</p><div class="mt-3 flex items-center gap-2"${_scopeId}><code class="flex-1 truncate rounded-lg border border-line bg-appbg px-3 py-2 text-sm text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.domain.subdomain)}</code><button class="shrink-0 rounded-lg border border-line px-3 py-2 text-xs font-bold text-ink-2 hover:bg-surface-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(copied.value === "sub" ? (0, vue_exports.unref)(t)("Copied") : (0, vue_exports.unref)(t)("Copy"))}</button></div></div><div class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><h3 class="text-sm font-bold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Custom domain"))}</h3><p class="mt-1 text-xs text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Serve your community from your own domain."))}</p><div class="mt-3 flex flex-col gap-2 sm:flex-row"${_scopeId}><input${(0, server_renderer_exports.ssrRenderAttr)("value", (0, vue_exports.unref)(domainForm).custom_domain)} type="text"${(0, server_renderer_exports.ssrRenderAttr)("placeholder", (0, vue_exports.unref)(t)("forum.yourbrand.com"))} class="w-full rounded-lg border-line bg-appbg text-sm text-ink placeholder:text-ink-muted focus:border-primary focus:ring-primary"${_scopeId}><button${(0, server_renderer_exports.ssrIncludeBooleanAttr)((0, vue_exports.unref)(domainForm).processing) ? " disabled" : ""} class="shrink-0 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 disabled:opacity-50"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Save"))}</button></div>`);
						if ((0, vue_exports.unref)(domainForm).errors.custom_domain) _push(`<p class="mt-1.5 text-xs font-medium text-red-500"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(domainForm).errors.custom_domain)}</p>`);
						else _push(`<!---->`);
						if (__props.domain.custom) {
							_push(`<div class="mt-5 rounded-xl border border-line bg-appbg p-4"${_scopeId}><div class="flex items-center justify-between"${_scopeId}><span class="text-xs font-bold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("DNS record"))}</span><span class="${(0, server_renderer_exports.ssrRenderClass)([__props.domain.verified ? "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/15 text-amber-600 dark:text-amber-400", "rounded-full px-2 py-0.5 text-xs font-bold"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.domain.verified ? (0, vue_exports.unref)(t)("Verified") : (0, vue_exports.unref)(t)("Pending"))}</span></div><p class="mt-2 text-xs text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Add this CNAME at your DNS provider:"))}</p><div class="mt-2 grid grid-cols-3 gap-2 text-xs"${_scopeId}><div${_scopeId}><div class="text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Type"))}</div><code class="text-ink"${_scopeId}>CNAME</code></div><div${_scopeId}><div class="text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Host"))}</div><code class="text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.domain.custom)}</code></div><div${_scopeId}><div class="text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Value"))}</div><code class="text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.domain.target)}</code></div></div><div class="mt-3 flex items-center gap-3"${_scopeId}>`);
							if (!__props.domain.verified) _push(`<button class="rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Verify DNS"))}</button>`);
							else _push(`<!---->`);
							_push(`<span class="text-xs text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("TLS certificate"))}: <b class="capitalize"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(__props.domain.certStatus)}</b></span></div></div>`);
						} else _push(`<!---->`);
						_push(`</div></section></div>`);
					} else return [(0, vue_exports.createVNode)("div", { class: "mx-auto max-w-5xl px-4 py-7" }, [
						(0, vue_exports.createVNode)((0, vue_exports.unref)(link_default), {
							href: "/panel",
							class: "text-sm font-semibold text-ink-muted hover:text-ink"
						}, {
							default: (0, vue_exports.withCtx)(() => [(0, vue_exports.createTextVNode)("← " + (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Communities")), 1)]),
							_: 1
						}),
						(0, vue_exports.createVNode)("div", { class: "mt-2 flex flex-wrap items-center justify-between gap-3" }, [(0, vue_exports.createVNode)("div", null, [(0, vue_exports.createVNode)("h1", { class: "text-2xl font-extrabold text-ink" }, (0, vue_exports.toDisplayString)(__props.community.name), 1), (0, vue_exports.createVNode)("a", {
							href: __props.community.url,
							target: "_blank",
							class: "text-sm text-primary hover:underline"
						}, (0, vue_exports.toDisplayString)(__props.community.url), 9, ["href"])]), (0, vue_exports.createVNode)("div", { class: "flex items-center gap-2" }, [(0, vue_exports.createVNode)("span", { class: ["rounded-full px-2.5 py-1 text-xs font-bold capitalize", statusTone[__props.community.status] || "bg-line text-ink-2"] }, (0, vue_exports.toDisplayString)(__props.community.status), 3), (0, vue_exports.createVNode)("form", { onSubmit: (0, vue_exports.withModifiers)(($event) => (0, vue_exports.unref)(router).post(`/panel/communities/${__props.community.id}/enter`), ["prevent"]) }, [(0, vue_exports.createVNode)("button", { class: "rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Open admin")), 1)], 40, ["onSubmit"])])]),
						flash.value ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("div", {
							key: 0,
							class: "mt-4 rounded-xl border border-primary/30 bg-primary/10 px-4 py-2.5 text-sm font-medium text-ink"
						}, (0, vue_exports.toDisplayString)(flash.value), 1)) : (0, vue_exports.createCommentVNode)("", true),
						(0, vue_exports.createVNode)("div", { class: "mt-6 flex gap-1 border-b border-line" }, [((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(tabs, (x) => {
							return (0, vue_exports.createVNode)("button", {
								key: x.key,
								class: ["-mb-px border-b-2 px-4 py-2.5 text-sm font-semibold", tab.value === x.key ? "border-primary text-ink" : "border-transparent text-ink-muted hover:text-ink"],
								onClick: ($event) => tab.value = x.key
							}, (0, vue_exports.toDisplayString)(x.label), 11, ["onClick"]);
						}), 64))]),
						(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("section", { class: "mt-6 space-y-5" }, [
							(0, vue_exports.createVNode)("div", { class: "grid grid-cols-2 gap-3 sm:grid-cols-4" }, [
								(0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-4" }, [(0, vue_exports.createVNode)("div", { class: "text-xs font-semibold text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Members")), 1), (0, vue_exports.createVNode)("div", { class: "mt-1 text-2xl font-black text-ink" }, (0, vue_exports.toDisplayString)(num(__props.snapshot.members)), 1)]),
								(0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-4" }, [(0, vue_exports.createVNode)("div", { class: "text-xs font-semibold text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Storage used")), 1), (0, vue_exports.createVNode)("div", { class: "mt-1 text-2xl font-black text-ink" }, (0, vue_exports.toDisplayString)(bytes(__props.snapshot.storageBytes)), 1)]),
								(0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-4" }, [(0, vue_exports.createVNode)("div", { class: "text-xs font-semibold text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Requests (24h)")), 1), (0, vue_exports.createVNode)("div", { class: "mt-1 text-2xl font-black text-ink" }, (0, vue_exports.toDisplayString)(num(__props.snapshot.requests24h)), 1)]),
								(0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-4" }, [(0, vue_exports.createVNode)("div", { class: "text-xs font-semibold text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Avg response")), 1), (0, vue_exports.createVNode)("div", { class: "mt-1 text-2xl font-black text-ink" }, (0, vue_exports.toDisplayString)(__props.snapshot.respMs) + " ms", 1)])
							]),
							(0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-5" }, [(0, vue_exports.createVNode)("h2", { class: "text-sm font-bold text-ink" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Plan usage")), 1), (0, vue_exports.createVNode)("div", { class: "mt-4 space-y-4" }, [
								(0, vue_exports.createVNode)("div", null, [(0, vue_exports.createVNode)("div", { class: "flex justify-between text-xs" }, [(0, vue_exports.createVNode)("span", { class: "font-semibold text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Storage")), 1), (0, vue_exports.createVNode)("span", { class: "text-ink-muted" }, (0, vue_exports.toDisplayString)(bytes(__props.snapshot.storageBytes)) + " / " + (0, vue_exports.toDisplayString)(bytes(__props.snapshot.quota.storageBytes)), 1)]), (0, vue_exports.createVNode)("div", { class: "mt-1.5 h-2 overflow-hidden rounded-full bg-appbg" }, [(0, vue_exports.createVNode)("div", {
									class: "h-full rounded-full bg-primary",
									style: { width: pct(__props.snapshot.storageBytes, __props.snapshot.quota.storageBytes) + "%" }
								}, null, 4)])]),
								(0, vue_exports.createVNode)("div", null, [(0, vue_exports.createVNode)("div", { class: "flex justify-between text-xs" }, [(0, vue_exports.createVNode)("span", { class: "font-semibold text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Members")), 1), (0, vue_exports.createVNode)("span", { class: "text-ink-muted" }, [(0, vue_exports.createTextVNode)((0, vue_exports.toDisplayString)(num(__props.snapshot.members)), 1), __props.snapshot.quota.members ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, { key: 0 }, [(0, vue_exports.createTextVNode)(" / " + (0, vue_exports.toDisplayString)(num(__props.snapshot.quota.members)), 1)], 64)) : ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, { key: 1 }, [(0, vue_exports.createTextVNode)(" · " + (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Unlimited")), 1)], 64))])]), (0, vue_exports.createVNode)("div", { class: "mt-1.5 h-2 overflow-hidden rounded-full bg-appbg" }, [(0, vue_exports.createVNode)("div", {
									class: "h-full rounded-full bg-sky-500",
									style: {
										width: (__props.snapshot.quota.members ? pct(__props.snapshot.members, __props.snapshot.quota.members) : 100) + "%",
										opacity: __props.snapshot.quota.members ? 1 : .25
									}
								}, null, 4)])]),
								(0, vue_exports.createVNode)("div", null, [(0, vue_exports.createVNode)("div", { class: "flex justify-between text-xs" }, [(0, vue_exports.createVNode)("span", { class: "font-semibold text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Bandwidth (30d)")), 1), (0, vue_exports.createVNode)("span", { class: "text-ink-muted" }, [(0, vue_exports.createTextVNode)((0, vue_exports.toDisplayString)(bytes(__props.snapshot.bandwidth30dBytes)), 1), __props.snapshot.quota.bandwidthGb ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, { key: 0 }, [(0, vue_exports.createTextVNode)(" / " + (0, vue_exports.toDisplayString)(__props.snapshot.quota.bandwidthGb) + " GB", 1)], 64)) : ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, { key: 1 }, [(0, vue_exports.createTextVNode)(" · " + (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Unlimited")), 1)], 64))])]), (0, vue_exports.createVNode)("div", { class: "mt-1.5 h-2 overflow-hidden rounded-full bg-appbg" }, [(0, vue_exports.createVNode)("div", {
									class: "h-full rounded-full bg-amber-500",
									style: {
										width: (__props.snapshot.quota.bandwidthGb ? pct(__props.snapshot.bandwidth30dBytes, __props.snapshot.quota.bandwidthGb * 1024 * 1024 * 1024) : 100) + "%",
										opacity: __props.snapshot.quota.bandwidthGb ? 1 : .25
									}
								}, null, 4)])])
							])]),
							(0, vue_exports.createVNode)("div", { class: "grid gap-3 sm:grid-cols-2" }, [(0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-5" }, [
								(0, vue_exports.createVNode)("div", { class: "text-xs font-semibold text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Plan")), 1),
								(0, vue_exports.createVNode)("div", { class: "mt-1 flex items-baseline gap-2" }, [(0, vue_exports.createVNode)("span", { class: "text-xl font-black text-ink" }, (0, vue_exports.toDisplayString)(__props.billing.plan), 1), (0, vue_exports.createVNode)("span", { class: "text-sm text-ink-muted" }, (0, vue_exports.toDisplayString)(__props.billing.price) + "/" + (0, vue_exports.toDisplayString)(__props.billing.interval), 1)]),
								(0, vue_exports.createVNode)("p", { class: "mt-2 text-sm text-ink-2" }, [
									(0, vue_exports.createTextVNode)((0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Next payment")) + ": ", 1),
									(0, vue_exports.createVNode)("b", null, (0, vue_exports.toDisplayString)(__props.billing.nextPaymentDate), 1),
									(0, vue_exports.createTextVNode)(),
									__props.billing.nextPaymentInDays != null ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("span", {
										key: 0,
										class: "text-ink-muted"
									}, "(" + (0, vue_exports.toDisplayString)(__props.billing.nextPaymentInDays) + " " + (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("days")) + ")", 1)) : (0, vue_exports.createCommentVNode)("", true)
								])
							]), (0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-5" }, [(0, vue_exports.createVNode)("div", { class: "text-xs font-semibold text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Live snapshot")), 1), (0, vue_exports.createVNode)("div", { class: "mt-2 grid grid-cols-2 gap-y-1.5 text-sm" }, [
								(0, vue_exports.createVNode)("span", { class: "text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("CPU")), 1),
								(0, vue_exports.createVNode)("span", { class: "text-right font-semibold text-ink" }, (0, vue_exports.toDisplayString)(__props.snapshot.cpu) + "%", 1),
								(0, vue_exports.createVNode)("span", { class: "text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Redis")), 1),
								(0, vue_exports.createVNode)("span", { class: "text-right font-semibold text-ink" }, (0, vue_exports.toDisplayString)(bytes(__props.snapshot.redisBytes)), 1),
								(0, vue_exports.createVNode)("span", { class: "text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Queue depth")), 1),
								(0, vue_exports.createVNode)("span", { class: "text-right font-semibold text-ink" }, (0, vue_exports.toDisplayString)(__props.snapshot.queueDepth), 1),
								(0, vue_exports.createVNode)("span", { class: "text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Database")), 1),
								(0, vue_exports.createVNode)("span", { class: "text-right font-semibold text-ink" }, (0, vue_exports.toDisplayString)(bytes(__props.snapshot.dbBytes)), 1)
							])])])
						], 512), [[vue_exports.vShow, tab.value === "overview"]]),
						(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("section", { class: "mt-6" }, [(0, vue_exports.createVNode)("div", { class: "flex items-center justify-between" }, [(0, vue_exports.createVNode)("h2", { class: "text-sm font-bold text-ink" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Usage over time")), 1), (0, vue_exports.createVNode)("div", { class: "flex rounded-lg border border-line p-0.5" }, [((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)([
							"24h",
							"7d",
							"30d"
						], (r) => {
							return (0, vue_exports.createVNode)("button", {
								key: r,
								class: ["rounded-md px-3 py-1 text-xs font-bold", liveRange.value === r ? "bg-primary text-white" : "text-ink-muted hover:text-ink"],
								onClick: ($event) => loadRange(r)
							}, (0, vue_exports.toDisplayString)(r), 11, ["onClick"]);
						}), 64))])]), (0, vue_exports.createVNode)("div", { class: ["mt-4 grid gap-4 sm:grid-cols-2", loading.value ? "opacity-50" : ""] }, [((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(charts, (c) => {
							return (0, vue_exports.createVNode)("div", {
								key: c.key,
								class: "rounded-2xl border border-line bg-surface p-4"
							}, [(0, vue_exports.createVNode)(UsageChart_default, {
								points: pointsFor(c.key),
								label: c.label,
								kind: c.kind,
								color: c.color
							}, null, 8, [
								"points",
								"label",
								"kind",
								"color"
							])]);
						}), 64))], 2)], 512), [[vue_exports.vShow, tab.value === "resources"]]),
						(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("section", { class: "mt-6 space-y-5" }, [(0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-5" }, [(0, vue_exports.createVNode)("div", { class: "flex flex-wrap items-start justify-between gap-4" }, [(0, vue_exports.createVNode)("div", null, [
							(0, vue_exports.createVNode)("div", { class: "flex items-center gap-2" }, [(0, vue_exports.createVNode)("span", { class: "text-xl font-black text-ink" }, (0, vue_exports.toDisplayString)(__props.billing.plan), 1), (0, vue_exports.createVNode)("span", { class: ["rounded-full px-2 py-0.5 text-xs font-bold capitalize", statusTone[__props.billing.status] || "bg-line text-ink-2"] }, (0, vue_exports.toDisplayString)(__props.billing.status), 3)]),
							(0, vue_exports.createVNode)("p", { class: "mt-1 text-sm text-ink-2" }, (0, vue_exports.toDisplayString)(__props.billing.price) + " / " + (0, vue_exports.toDisplayString)(__props.billing.interval), 1),
							(0, vue_exports.createVNode)("p", { class: "mt-3 text-sm text-ink-2" }, [(0, vue_exports.createTextVNode)((0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Current cycle renews")) + " ", 1), (0, vue_exports.createVNode)("b", null, (0, vue_exports.toDisplayString)(__props.billing.nextPaymentDate), 1)]),
							(0, vue_exports.createVNode)("p", { class: "text-sm text-ink-2" }, [(0, vue_exports.createTextVNode)((0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Next charge")) + ": ", 1), (0, vue_exports.createVNode)("b", null, (0, vue_exports.toDisplayString)(__props.billing.price), 1)]),
							__props.billing.card ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("p", {
								key: 0,
								class: "mt-2 text-sm text-ink-muted"
							}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Card on file")) + ": " + (0, vue_exports.toDisplayString)(__props.billing.card.brand) + " ···· " + (0, vue_exports.toDisplayString)(__props.billing.card.last4), 1)) : (0, vue_exports.createCommentVNode)("", true)
						]), (0, vue_exports.createVNode)("button", {
							class: "rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600",
							onClick: manageBilling
						}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Manage billing")), 1)])]), (0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-5" }, [(0, vue_exports.createVNode)("h3", { class: "text-sm font-bold text-ink" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Recent invoices")), 1), (0, vue_exports.createVNode)("ul", { class: "mt-3 divide-y divide-line" }, [((0, vue_exports.openBlock)(true), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(invoices.value, (inv, i) => {
							return (0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("li", {
								key: i,
								class: "flex items-center justify-between py-2.5 text-sm"
							}, [(0, vue_exports.createVNode)("span", { class: "text-ink-2" }, (0, vue_exports.toDisplayString)(inv.date), 1), (0, vue_exports.createVNode)("span", { class: "flex items-center gap-3" }, [(0, vue_exports.createVNode)("span", { class: "font-semibold text-ink" }, (0, vue_exports.toDisplayString)(inv.amount), 1), (0, vue_exports.createVNode)("span", { class: "rounded-full bg-emerald-500/15 px-2 py-0.5 text-xs font-bold text-emerald-600 dark:text-emerald-400" }, (0, vue_exports.toDisplayString)(inv.status), 1)])]);
						}), 128))])])], 512), [[vue_exports.vShow, tab.value === "billing"]]),
						(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("section", { class: "mt-6 space-y-5" }, [(0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-5" }, [
							(0, vue_exports.createVNode)("h3", { class: "text-sm font-bold text-ink" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Convoro subdomain")), 1),
							(0, vue_exports.createVNode)("p", { class: "mt-1 text-xs text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Always available, HTTPS included.")), 1),
							(0, vue_exports.createVNode)("div", { class: "mt-3 flex items-center gap-2" }, [(0, vue_exports.createVNode)("code", { class: "flex-1 truncate rounded-lg border border-line bg-appbg px-3 py-2 text-sm text-ink-2" }, (0, vue_exports.toDisplayString)(__props.domain.subdomain), 1), (0, vue_exports.createVNode)("button", {
								class: "shrink-0 rounded-lg border border-line px-3 py-2 text-xs font-bold text-ink-2 hover:bg-surface-2",
								onClick: ($event) => copy(__props.domain.subdomain, "sub")
							}, (0, vue_exports.toDisplayString)(copied.value === "sub" ? (0, vue_exports.unref)(t)("Copied") : (0, vue_exports.unref)(t)("Copy")), 9, ["onClick"])])
						]), (0, vue_exports.createVNode)("div", { class: "rounded-2xl border border-line bg-surface p-5" }, [
							(0, vue_exports.createVNode)("h3", { class: "text-sm font-bold text-ink" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Custom domain")), 1),
							(0, vue_exports.createVNode)("p", { class: "mt-1 text-xs text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Serve your community from your own domain.")), 1),
							(0, vue_exports.createVNode)("div", { class: "mt-3 flex flex-col gap-2 sm:flex-row" }, [(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("input", {
								"onUpdate:modelValue": ($event) => (0, vue_exports.unref)(domainForm).custom_domain = $event,
								type: "text",
								placeholder: (0, vue_exports.unref)(t)("forum.yourbrand.com"),
								class: "w-full rounded-lg border-line bg-appbg text-sm text-ink placeholder:text-ink-muted focus:border-primary focus:ring-primary"
							}, null, 8, ["onUpdate:modelValue", "placeholder"]), [[vue_exports.vModelText, (0, vue_exports.unref)(domainForm).custom_domain]]), (0, vue_exports.createVNode)("button", {
								disabled: (0, vue_exports.unref)(domainForm).processing,
								class: "shrink-0 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 disabled:opacity-50",
								onClick: saveDomain
							}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Save")), 9, ["disabled"])]),
							(0, vue_exports.unref)(domainForm).errors.custom_domain ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("p", {
								key: 0,
								class: "mt-1.5 text-xs font-medium text-red-500"
							}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(domainForm).errors.custom_domain), 1)) : (0, vue_exports.createCommentVNode)("", true),
							__props.domain.custom ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("div", {
								key: 1,
								class: "mt-5 rounded-xl border border-line bg-appbg p-4"
							}, [
								(0, vue_exports.createVNode)("div", { class: "flex items-center justify-between" }, [(0, vue_exports.createVNode)("span", { class: "text-xs font-bold text-ink" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("DNS record")), 1), (0, vue_exports.createVNode)("span", { class: ["rounded-full px-2 py-0.5 text-xs font-bold", __props.domain.verified ? "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/15 text-amber-600 dark:text-amber-400"] }, (0, vue_exports.toDisplayString)(__props.domain.verified ? (0, vue_exports.unref)(t)("Verified") : (0, vue_exports.unref)(t)("Pending")), 3)]),
								(0, vue_exports.createVNode)("p", { class: "mt-2 text-xs text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Add this CNAME at your DNS provider:")), 1),
								(0, vue_exports.createVNode)("div", { class: "mt-2 grid grid-cols-3 gap-2 text-xs" }, [
									(0, vue_exports.createVNode)("div", null, [(0, vue_exports.createVNode)("div", { class: "text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Type")), 1), (0, vue_exports.createVNode)("code", { class: "text-ink" }, "CNAME")]),
									(0, vue_exports.createVNode)("div", null, [(0, vue_exports.createVNode)("div", { class: "text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Host")), 1), (0, vue_exports.createVNode)("code", { class: "text-ink" }, (0, vue_exports.toDisplayString)(__props.domain.custom), 1)]),
									(0, vue_exports.createVNode)("div", null, [(0, vue_exports.createVNode)("div", { class: "text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Value")), 1), (0, vue_exports.createVNode)("code", { class: "text-ink" }, (0, vue_exports.toDisplayString)(__props.domain.target), 1)])
								]),
								(0, vue_exports.createVNode)("div", { class: "mt-3 flex items-center gap-3" }, [!__props.domain.verified ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("button", {
									key: 0,
									class: "rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600",
									onClick: verifyDomain
								}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Verify DNS")), 1)) : (0, vue_exports.createCommentVNode)("", true), (0, vue_exports.createVNode)("span", { class: "text-xs text-ink-muted" }, [(0, vue_exports.createTextVNode)((0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("TLS certificate")) + ": ", 1), (0, vue_exports.createVNode)("b", { class: "capitalize" }, (0, vue_exports.toDisplayString)(__props.domain.certStatus), 1)])])
							])) : (0, vue_exports.createCommentVNode)("", true)
						])], 512), [[vue_exports.vShow, tab.value === "domain"]])
					])];
				}),
				_: 1
			}, _parent));
			_push(`<!--]-->`);
		};
	}
});
//#endregion
//#region resources/js/Pages/PanelManage.vue
var _sfc_setup = PanelManage_vue_vue_type_script_setup_true_lang_default.setup;
PanelManage_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/PanelManage.vue");
	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
var PanelManage_default = PanelManage_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { PanelManage_default as default };
