@frigear-nu/events 0.0.6 → 0.0.8

package/dist/runtime/app/composables/useEvents.d.ts

@@ -1,16 +1,18 @@
-export declare function useEvents(): {
+import type { Translated } from '../../../types.js';
+export declare function useEvents(): Promise<{
     events: any;
     grouped: any;
     status: any;
     refresh: any;
-};
-export declare function useEvent(slug: MaybeRefOrGetter<string>): {
+}>;
+/** Awaitable: resolves once the event is fetched, so SSR renders the page with data. */
+export declare function useEvent(slug: MaybeRefOrGetter<string>): Promise<{
     event: any;
     status: any;
     error: any;
     refresh: any;
     purchase: (ticketTypeId: string, addonIds?: string[]) => Promise<any>;
-};
+}>;
 export declare function useMyTickets(): {
     tickets: any;
     status: any;
@@ -19,3 +21,7 @@ export declare function useMyTickets(): {
 };
 /** Locale for translated texts: `@nuxtjs/i18n`'s when installed, otherwise `en`. */
 export declare function useEventsLocale(): any;
+/** The site's default locale: shown for texts that have no translation in the current locale. */
+export declare function useEventsFallbackLocale(): any;
+/** `tr(value)`: a translated text in the current locale, falling back to the default locale, then `en`, then any. */
+export declare function useEventsTranslate(): (value: Translated | null | undefined) => string;

package/dist/runtime/app/composables/useEvents.js

@@ -1,28 +1,30 @@
-export function useEvents() {
-  const { data, status, refresh } = useFetch("/api/events", { key: "events:list", default: () => [] });
+import { translate } from "../../utils/index.js";
+export async function useEvents() {
+  const now = useState("events:now", () => Date.now());
+  const { data, status, refresh } = await useFetch("/api/events", { key: "events:list", default: () => [] });
   const grouped = computed(() => {
-    const now = Date.now();
     const start = (e) => new Date(e.startsAt).getTime();
     const end = (e) => e.endsAt ? new Date(e.endsAt).getTime() : start(e) + 24 * 36e5;
     return {
-      ongoing: data.value.filter((e) => start(e) <= now && now < end(e)),
-      upcoming: data.value.filter((e) => start(e) > now),
-      past: data.value.filter((e) => end(e) <= now).reverse()
+      ongoing: data.value.filter((e) => start(e) <= now.value && now.value < end(e)),
+      upcoming: data.value.filter((e) => start(e) > now.value),
+      past: data.value.filter((e) => end(e) <= now.value).reverse()
     };
   });
   return { events: data, grouped, status, refresh };
 }
-export function useEvent(slug) {
+export async function useEvent(slug) {
   const { loggedIn } = useUserSession();
-  const { data, status, error, refresh } = useFetch(() => `/api/events/${toValue(slug)}`, {
+  const locale = useEventsLocale();
+  const { data, status, error, refresh } = await useFetch(() => `/api/events/${toValue(slug)}`, {
     key: `events:detail:${toValue(slug)}`,
-    // Eligibility (membership, limits) depends on the session.
+    // Eligibility (membership, limits) depends on the session; refetch quietly, keeping the data on screen.
     watch: [loggedIn]
   });
   async function purchase(ticketTypeId, addonIds = []) {
     const result = await $fetch(`/api/events/${toValue(slug)}/purchase`, {
       method: "POST",
-      body: { ticketTypeId, addonIds }
+      body: { ticketTypeId, addonIds, locale: locale.value }
     });
     if (result.url) await navigateTo(result.url, { external: true });
     else await refresh();
@@ -48,3 +50,12 @@ export function useEventsLocale() {
   const nuxtApp = useNuxtApp();
   return computed(() => nuxtApp.$i18n?.locale?.value ?? "en");
 }
+export function useEventsFallbackLocale() {
+  const nuxtApp = useNuxtApp();
+  return computed(() => nuxtApp.$i18n?.defaultLocale ?? "en");
+}
+export function useEventsTranslate() {
+  const locale = useEventsLocale();
+  const fallback = useEventsFallbackLocale();
+  return (value) => translate(value, locale.value, fallback.value);
+}

package/dist/runtime/app/pages/admin-event.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/admin-event.vue

@@ -0,0 +1,151 @@
+<script setup>
+import AttendeesTab from "../tabs/Attendees.vue";
+import DetailsTab from "../tabs/Details.vue";
+import TicketsTab from "../tabs/Tickets.vue";
+import { toLocalInput, useAdminAction } from "../utils/admin-event";
+defineOptions({ name: "EventsAdminEventPage" });
+const t = useModuleT("events");
+const route = useRoute();
+const tr = useEventsTranslate();
+const pages = useRuntimeConfig().public.events?.pages;
+const id = computed(() => String(route.params.id));
+const { busy, run } = useAdminAction();
+const { data: event, refresh } = await useFetch(() => `/api/events/admin/events/${id.value}`);
+const Tabs = resolveComponent("WidgetTabs");
+const tabs = typeof Tabs === "string" ? void 0 : Tabs;
+const facts = reactive({
+  status: "draft",
+  startsAt: "",
+  endsAt: "",
+  location: void 0,
+  slug: ""
+});
+watch(event, (value) => {
+  if (!value) return;
+  Object.assign(facts, {
+    status: value.status,
+    startsAt: toLocalInput(value.startsAt),
+    endsAt: toLocalInput(value.endsAt),
+    location: value.location ?? void 0,
+    slug: value.slug
+  });
+}, { immediate: true });
+const statuses = computed(() => ["draft", "published", "archived"].map((value) => ({ value, label: t(`admin.statuses.${value}`, value.charAt(0).toUpperCase() + value.slice(1)) })));
+const statusColor = { draft: "warning", published: "success", archived: "neutral" };
+const saveFacts = () => run(async () => {
+  await $fetch(`/api/events/admin/events/${id.value}`, {
+    method: "PATCH",
+    body: {
+      status: facts.status,
+      startsAt: facts.startsAt,
+      endsAt: facts.endsAt || null,
+      location: facts.location ?? null,
+      slug: facts.slug
+    }
+  });
+  await refresh();
+}, t("admin.saved", "Saved."));
+</script>
+
+<template>
+  <AdminPage v-if="event">
+    <AdminPageHeader
+      :title="tr(event.name)"
+      :back="{ label: t('admin.title', 'Events'), to: pages?.admin || '/admin/events' }"
+    >
+      <UBadge
+        variant="subtle"
+        :color="statusColor[event.status] ?? 'neutral'"
+        :label="t(`admin.statuses.${event.status}`, event.status)"
+      />
+      <template #actions>
+        <UButton
+          v-if="event.status === 'published' && pages?.event"
+          :to="pages.event.replace(':slug', encodeURIComponent(event.slug))"
+          variant="outline"
+          color="neutral"
+          icon="i-lucide-external-link"
+          :label="t('admin.viewPublic', 'View public page')"
+        />
+      </template>
+    </AdminPageHeader>
+
+    <AdminSection :title="t('admin.keyFacts', 'Event')">
+      <form
+        id="admin-event-facts"
+        class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+        @submit.prevent="saveFacts"
+      >
+        <UFormField :label="t('admin.status', 'Status')">
+          <USelect
+            v-model="facts.status"
+            :items="statuses"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField :label="t('admin.starts', 'Starts')">
+          <UInput
+            v-model="facts.startsAt"
+            type="datetime-local"
+            class="w-full"
+            required
+          />
+        </UFormField>
+        <UFormField :label="t('admin.ends', 'Ends')">
+          <UInput
+            v-model="facts.endsAt"
+            type="datetime-local"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField :label="t('admin.location', 'Location')">
+          <TranslatedInput v-model="facts.location" />
+        </UFormField>
+        <UFormField :label="t('admin.slug', 'URL name')">
+          <UInput
+            v-model="facts.slug"
+            class="w-full"
+            required
+          />
+        </UFormField>
+      </form>
+      <template #footer>
+        <div class="flex justify-end">
+          <UButton
+            type="submit"
+            form="admin-event-facts"
+            :loading="busy"
+            :label="t('admin.save', 'Save')"
+          />
+        </div>
+      </template>
+    </AdminSection>
+
+    <component
+      :is="tabs"
+      v-if="tabs"
+      name="admin.events"
+      :context="{ event }"
+      @refresh="refresh"
+    />
+    <template v-else>
+      <DetailsTab
+        :event="event"
+        @refresh="refresh"
+      />
+      <TicketsTab
+        :event="event"
+        @refresh="refresh"
+      />
+      <AttendeesTab
+        :event="event"
+        @refresh="refresh"
+      />
+    </template>
+  </AdminPage>
+  <AdminEmpty
+    v-else
+    icon="i-lucide-calendar-x"
+    :title="t('notFound', 'Event not found')"
+  />
+</template>

package/dist/runtime/app/pages/admin-event.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/admin.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/admin.vue

@@ -0,0 +1,154 @@
+<script setup>
+defineOptions({ name: "EventsAdminPage" });
+const t = useModuleT("events");
+const toast = useToast();
+const locale = useEventsLocale();
+const tr = useEventsTranslate();
+const pages = useRuntimeConfig().public.events?.pages;
+const { data: events, refresh } = await useFetch("/api/events/admin/events", { default: () => [] });
+const eventTo = (id) => (pages?.adminEvent || "/admin/events/:id").replace(":id", encodeURIComponent(id));
+const when = (value) => new Intl.DateTimeFormat(locale.value, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
+const statusColor = { draft: "neutral", published: "success", archived: "warning" };
+const columns = [
+  { accessorKey: "name", header: t("admin.name", "Name"), cell: ({ row }) => tr(row.original.name) },
+  { accessorKey: "status", header: t("admin.status", "Status") },
+  { accessorKey: "startsAt", header: t("admin.starts", "Starts"), cell: ({ row }) => when(row.original.startsAt) },
+  { accessorKey: "location", header: t("admin.location", "Location"), cell: ({ row }) => tr(row.original.location) },
+  { id: "actions", header: "" }
+];
+async function clone(id) {
+  try {
+    const copy = await $fetch(`/api/events/admin/events/${id}/clone`, { method: "POST" });
+    await navigateTo(eventTo(copy.id));
+  } catch (cause) {
+    toast.add({ title: cause.statusMessage ?? t("admin.error", "Something went wrong."), color: "error" });
+  }
+}
+const creating = ref(false);
+const saving = ref(false);
+const draft = reactive({ name: void 0, slug: "", startsAt: "", location: void 0 });
+const slugify = (value) => value.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+const draftName = computed(() => tr(draft.name));
+watch(draftName, (name, previous) => {
+  if (draft.slug === slugify(previous)) draft.slug = slugify(name);
+});
+async function create() {
+  saving.value = true;
+  try {
+    const created = await $fetch("/api/events/admin/events", {
+      method: "POST",
+      body: { name: draft.name, slug: draft.slug, startsAt: draft.startsAt, location: draft.location || null, status: "draft" }
+    });
+    await refresh();
+    await navigateTo(eventTo(created.id));
+  } catch (cause) {
+    toast.add({ title: cause.statusMessage ?? t("admin.error", "Something went wrong."), color: "error" });
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <AdminPage>
+    <AdminPageHeader :title="t('admin.title', 'Events')">
+      <template #links>
+        <UButton
+          icon="i-lucide-plus"
+          :label="t('admin.create', 'New event')"
+          @click="creating = true"
+        />
+      </template>
+    </AdminPageHeader>
+
+    <AdminTable
+      :data="events"
+      :columns="columns"
+      @select="(_, row2) => navigateTo(eventTo(row2.original.id))"
+    >
+      <template #status-cell="{ row }">
+        <UBadge
+          variant="subtle"
+          :color="statusColor[row.original.status]"
+          :label="row.original.status"
+        />
+      </template>
+      <template #actions-cell="{ row }">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          icon="i-lucide-copy"
+          :aria-label="t('admin.clone', 'Duplicate')"
+          @click.stop="clone(row.original.id)"
+        />
+      </template>
+      <template #empty>
+        <AdminEmpty
+          icon="i-lucide-calendar"
+          :title="t('admin.empty', 'No events yet')"
+          :description="t('admin.emptyDescription', 'Create the first event to start selling tickets.')"
+        />
+      </template>
+    </AdminTable>
+
+    <UModal
+      v-model:open="creating"
+      :title="t('admin.create', 'New event')"
+    >
+      <template #body>
+        <form
+          id="admin-event-form"
+          class="flex flex-col gap-4"
+          @submit.prevent="create"
+        >
+          <UFormField :label="t('admin.name', 'Name')">
+            <TranslatedInput
+              v-model="draft.name"
+              required
+            />
+          </UFormField>
+          <UFormField
+            :label="t('admin.slug', 'URL name')"
+            :description="t('admin.slugHelp', 'Lowercase letters, numbers and dashes.')"
+          >
+            <UInput
+              v-model="draft.slug"
+              class="w-full"
+              required
+              pattern="[a-z0-9]+(-[a-z0-9]+)*"
+            />
+          </UFormField>
+          <UFormField :label="t('admin.starts', 'Starts')">
+            <UInput
+              v-model="draft.startsAt"
+              type="datetime-local"
+              class="w-full"
+              required
+            />
+          </UFormField>
+          <UFormField :label="t('admin.location', 'Location')">
+            <TranslatedInput v-model="draft.location" />
+          </UFormField>
+        </form>
+      </template>
+      <template #footer>
+        <div class="flex w-full justify-end gap-2">
+          <UButton
+            variant="subtle"
+            color="neutral"
+            :label="t('admin.cancel', 'Cancel')"
+            @click="creating = false"
+          />
+          <UButton
+            type="submit"
+            form="admin-event-form"
+            :loading="saving"
+            :disabled="!draftName"
+            :label="t('admin.createAction', 'Create draft')"
+          />
+        </div>
+      </template>
+    </UModal>
+  </AdminPage>
+</template>

package/dist/runtime/app/pages/admin.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/event.d.vue.ts

@@ -1,3 +1,16 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare var __VLS_82: {
+    event: any;
+    body: any;
+};
+type __VLS_Slots = {} & {
+    body?: (props: typeof __VLS_82) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/pages/event.vue

@@ -1,15 +1,17 @@
 <script setup>
-import { translate } from "../../utils";
+const hasMdc = typeof resolveComponent("MDC") !== "string";
 const t = useModuleT("events");
 const route = useRoute();
 const slug = computed(() => String(route.params.slug));
 const { loggedIn } = useUserSession();
-const { event, status, error, purchase, refresh } = useEvent(slug);
+const { event, error, purchase, refresh } = await useEvent(slug);
 const locale = useEventsLocale();
+const tr = useEventsTranslate();
 const toast = useToast();
-if (error.value?.statusCode === 404) {
-  throw createError({ statusCode: 404, statusMessage: t("notFound", "Event not found"), fatal: true });
+if (!event.value) {
+  throw createError({ statusCode: error.value?.statusCode ?? 404, statusMessage: t("notFound", "Event not found"), fatal: true });
 }
+const eventsPath = useRuntimeConfig().public.events?.pages?.events || "/events";
 const buying = ref(false);
 async function onPurchase(ticketTypeId, addonIds) {
   buying.value = true;
@@ -40,12 +42,12 @@ onMounted(async () => {
   paidState.value = "timeout";
 });
 const ticketsPath = useRuntimeConfig().public.events?.pages?.tickets;
-useSeoMeta({ title: () => event.value ? translate(event.value.name, locale.value) : "Event" });
+useSeoMeta({ title: () => event.value ? tr(event.value.name) : "Event" });
 defineOptions({ name: "EventDetailPage" });
 </script>
 
 <template>
-  <UContainer class="py-10">
+  <UContainer class="py-8 sm:py-12">
     <template v-if="event">
       <UAlert
         v-if="paidState === 'waiting'"
@@ -88,48 +90,161 @@ defineOptions({ name: "EventDetailPage" });
         :title="t('paymentCancelled', 'Payment cancelled. Your reservation is held for a short while; you can pay from your tickets.')"
       />
 
-      <img
-        v-if="event.image"
-        :src="event.image"
-        :alt="translate(event.name, locale)"
-        class="mb-6 aspect-[3/1] w-full rounded-lg object-cover"
-      >
-      <h1 class="text-3xl font-semibold">
-        {{ translate(event.name, locale) }}
-      </h1>
-      <p class="mt-2 text-muted">
-        {{ new Intl.DateTimeFormat(locale, { dateStyle: "full", timeStyle: "short" }).format(new Date(event.startsAt)) }}
-        <template v-if="event.location">
-          · <a
-            v-if="event.locationUrl"
-            :href="event.locationUrl"
-            target="_blank"
-            rel="noopener"
-            class="underline"
-          >{{ event.location }}</a><template v-else>
-            {{ event.location }}
-          </template>
-        </template>
-      </p>
+      <UButton
+        :to="eventsPath"
+        color="neutral"
+        variant="link"
+        size="sm"
+        class="mb-4 -ml-2.5"
+        leading-icon="i-lucide-arrow-left"
+        :label="t('backToEvents', 'All events')"
+      />
 
-      <div class="mt-8 grid gap-8 md:grid-cols-[1fr_24rem]">
-        <!-- Plain text body: markdown rendering is left to the host (e.g. via a typography module). -->
-        <div class="whitespace-pre-line">
-          {{ translate(event.body ?? event.description, locale) }}
-        </div>
-        <EventTicketPicker
-          :ticket-types="event.ticketTypes"
-          :logged-in="loggedIn"
-          :loading="buying"
-          @purchase="onPurchase"
+      <!-- Hero -->
+      <div class="relative overflow-hidden rounded-xl ring ring-default">
+        <img
+          v-if="event.image"
+          :src="event.image"
+          :alt="tr(event.name)"
+          class="aspect-[2/1] w-full object-cover sm:aspect-[3/1]"
+        >
+        <div
+          v-else
+          class="gradient-linear-br-teal-purple aspect-[3/1] w-full sm:aspect-[4/1]"
         />
       </div>
+
+      <header class="mt-8 space-y-4">
+        <div
+          v-if="event.requiresMembership"
+          class="flex flex-wrap items-center gap-2"
+        >
+          <UBadge
+            color="warning"
+            variant="subtle"
+            icon="i-lucide-user-star"
+            :label="t('members', 'Members')"
+          />
+        </div>
+        <h1 class="text-3xl font-bold tracking-tight text-highlighted sm:text-5xl">
+          {{ tr(event.name) }}
+        </h1>
+        <p
+          v-if="event.description"
+          class="max-w-3xl text-lg text-muted"
+        >
+          {{ tr(event.description) }}
+        </p>
+
+        <div class="grid gap-3 pt-2 sm:grid-cols-2">
+          <div class="flex items-start gap-3 rounded-xl bg-elevated/50 p-4 ring ring-default">
+            <UIcon
+              name="i-lucide-calendar"
+              class="mt-0.5 size-5 shrink-0 text-primary"
+            />
+            <div class="min-w-0">
+              <div class="text-xs font-semibold uppercase tracking-wide text-muted">
+                {{ t("detail.when", "When?") }}
+              </div>
+              <div class="font-medium text-highlighted">
+                <NuxtTime
+                  :datetime="event.startsAt"
+                  :locale="locale"
+                  date-style="full"
+                  time-style="short"
+                />
+                <template v-if="event.endsAt">
+                  –
+                  <NuxtTime
+                    :datetime="event.endsAt"
+                    :locale="locale"
+                    time-style="short"
+                  />
+                </template>
+              </div>
+            </div>
+          </div>
+          <component
+            :is="event.locationUrl ? 'a' : 'div'"
+            v-if="event.location"
+            :href="event.locationUrl || void 0"
+            :target="event.locationUrl ? '_blank' : void 0"
+            :rel="event.locationUrl ? 'noopener' : void 0"
+            class="flex items-start gap-3 rounded-xl bg-elevated/50 p-4 ring ring-default"
+            :class="event.locationUrl ? 'transition hover:bg-elevated' : ''"
+          >
+            <UIcon
+              name="i-lucide-map-pin"
+              class="mt-0.5 size-5 shrink-0 text-primary"
+            />
+            <div class="min-w-0">
+              <div class="text-xs font-semibold uppercase tracking-wide text-muted">
+                {{ t("detail.where", "Where?") }}
+              </div>
+              <div class="flex items-center gap-1.5 font-medium text-highlighted">
+                {{ tr(event.location) }}
+                <UIcon
+                  v-if="event.locationUrl"
+                  name="i-lucide-external-link"
+                  class="size-4 text-muted"
+                />
+              </div>
+            </div>
+          </component>
+        </div>
+
+        <div
+          v-if="event.ticketTypes.length"
+          class="md:hidden"
+        >
+          <UButton
+            href="#tickets"
+            size="lg"
+            block
+            trailing-icon="i-lucide-ticket"
+            :label="t('detail.tickets.view', 'Show tickets')"
+          />
+        </div>
+      </header>
+
+      <div class="mt-10 grid gap-10 lg:grid-cols-[2fr_1fr] lg:items-start">
+        <!-- Body renders as MDC when the host has it (Nuxt Content), else plain text; override via the `body` slot. -->
+        <div>
+          <slot
+            name="body"
+            :event="event"
+            :body="tr(event.body ?? event.description)"
+          >
+            <MDC
+              v-if="hasMdc"
+              :value="tr(event.body ?? event.description)"
+              class="prose max-w-none text-muted"
+            />
+            <div
+              v-else
+              class="whitespace-pre-line text-muted"
+            >
+              {{ tr(event.body ?? event.description) }}
+            </div>
+          </slot>
+        </div>
+        <UCard
+          id="tickets"
+          :ui="{ root: 'rounded-xl shadow-sm scroll-mt-24 lg:sticky lg:top-24' }"
+        >
+          <template #header>
+            <h2 class="text-lg font-semibold">
+              {{ t("detail.tickets.title", "Tickets") }}
+            </h2>
+          </template>
+          <EventTicketPicker
+            :ticket-types="event.ticketTypes"
+            :logged-in="loggedIn"
+            :loading="buying"
+            @purchase="onPurchase"
+          />
+        </UCard>
+      </div>
     </template>
-    <p
-      v-else-if="status === 'pending'"
-      class="text-muted"
-    >
-      {{ t("loading", "Loading\u2026") }}
-    </p>
   </UContainer>
 </template>