@frigear-nu/events 0.0.9 → 0.1.0

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

@@ -5,25 +5,18 @@ const route = useRoute();
 const slug = computed(() => String(route.params.slug));
 const { loggedIn } = useUserSession();
 const { event, error, purchase, refresh } = await useEvent(slug);
-const locale = useEventsLocale();
 const tr = useEventsTranslate();
+const format = useFormat();
+const links = useEventLinks();
 const toast = useToast();
+const { busy: buying, run } = useAction();
 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;
-  try {
-    const result = await purchase(ticketTypeId, addonIds);
-    if (!result.url) toast.add({ title: t("ticketReady", "Your ticket is ready"), color: "success" });
-  } catch (e) {
-    toast.add({ title: e.statusMessage ?? t("purchaseFailed", "Could not buy the ticket"), color: "error" });
-  } finally {
-    buying.value = false;
-  }
-}
+const onPurchase = (ticketTypeId, addonIds) => run(async () => {
+  const result = await purchase(ticketTypeId, addonIds);
+  if (!result.url) toast.add({ title: t("ticketReady", "Your ticket is ready"), color: "success", icon: "i-lucide-check" });
+}, { error: t("purchaseFailed", "Could not buy the ticket") });
 const payment = computed(() => route.query.payment);
 const returnedTicket = computed(() => route.query.ticket);
 const paidState = ref(null);
@@ -41,83 +34,24 @@ onMounted(async () => {
   }
   paidState.value = "timeout";
 });
-const ticketsPath = useRuntimeConfig().public.events?.pages?.tickets;
+const hasTicketsPage = !!useRuntimeConfig().public.events?.pages?.tickets;
 useSeoMeta({ title: () => event.value ? tr(event.value.name) : "Event" });
 defineOptions({ name: "EventDetailPage" });
 </script>
 
 <template>
-  <UContainer class="py-8 sm:py-12">
-    <template v-if="event">
-      <UAlert
-        v-if="paidState === 'waiting'"
-        class="mb-6"
-        color="info"
-        variant="subtle"
-        :title="t('detail.tickets.payment.verifying.description', 'Confirming your payment\u2026')"
-      />
-      <UAlert
-        v-else-if="paidState === 'paid'"
-        class="mb-6"
-        color="success"
-        variant="subtle"
-        :title="t('paymentReceived', 'Payment received - your ticket is ready.')"
+  <UContainer>
+    <UPage v-if="event">
+      <UPageHeader
+        :title="tr(event.name)"
+        :description="event.description ? tr(event.description) : void 0"
       >
-        <template
-          v-if="ticketsPath"
-          #actions
-        >
-          <UButton
-            :to="ticketsPath"
-            size="xs"
-          >
-            {{ t("detail.tickets.view", "View ticket") }}
-          </UButton>
+        <template #headline>
+          <UBreadcrumb :items="[{ label: t('title', 'Events'), to: links.events() }, { label: tr(event.name) }]" />
         </template>
-      </UAlert>
-      <UAlert
-        v-else-if="paidState === 'timeout'"
-        class="mb-6"
-        color="warning"
-        variant="subtle"
-        :title="t('paymentTimeout', 'We have not received the payment confirmation yet. It will show up under your tickets shortly.')"
-      />
-      <UAlert
-        v-else-if="payment === 'cancel'"
-        class="mb-6"
-        color="neutral"
-        variant="subtle"
-        :title="t('paymentCancelled', 'Payment cancelled. Your reservation is held for a short while; you can pay from your tickets.')"
-      />
-
-      <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')"
-      />
-
-      <!-- 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"
+          class="mt-3"
         >
           <UBadge
             color="warning"
@@ -126,41 +60,72 @@ defineOptions({ name: "EventDetailPage" });
             :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"
+      </UPageHeader>
+
+      <UPageBody>
+        <UAlert
+          v-if="paidState === 'waiting'"
+          color="info"
+          variant="subtle"
+          :title="t('detail.tickets.payment.verifying.description', 'Confirming your payment\u2026')"
+        />
+        <UAlert
+          v-else-if="paidState === 'paid'"
+          color="success"
+          variant="subtle"
+          :title="t('paymentReceived', 'Payment received - your ticket is ready.')"
         >
-          {{ tr(event.description) }}
-        </p>
+          <template
+            v-if="hasTicketsPage"
+            #actions
+          >
+            <UButton
+              :to="links.tickets()"
+              size="xs"
+            >
+              {{ t("detail.tickets.view", "View ticket") }}
+            </UButton>
+          </template>
+        </UAlert>
+        <UAlert
+          v-else-if="paidState === 'timeout'"
+          color="warning"
+          variant="subtle"
+          :title="t('paymentTimeout', 'We have not received the payment confirmation yet. It will show up under your tickets shortly.')"
+        />
+        <UAlert
+          v-else-if="payment === 'cancel'"
+          color="neutral"
+          variant="subtle"
+          :title="t('paymentCancelled', 'Payment cancelled. Your reservation is held for a short while; you can pay from your tickets.')"
+        />
+
+        <!-- Hero -->
+        <div class="ring-default relative overflow-hidden rounded-lg ring">
+          <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>
 
-        <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">
+        <div class="grid gap-3 sm:grid-cols-2">
+          <div class="bg-elevated/50 ring-default flex items-start gap-3 rounded-lg p-4 ring">
             <UIcon
               name="i-lucide-calendar"
-              class="mt-0.5 size-5 shrink-0 text-primary"
+              class="text-primary mt-0.5 size-5 shrink-0"
             />
             <div class="min-w-0">
-              <div class="text-xs font-semibold uppercase tracking-wide text-muted">
+              <div class="text-muted text-xs font-semibold uppercase tracking-wide">
                 {{ 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 class="text-highlighted font-medium">
+                {{ format.dateRange(event.startsAt, event.endsAt, { dateStyle: "full", timeStyle: "short" }) }}
               </div>
             </div>
           </div>
@@ -170,23 +135,23 @@ defineOptions({ name: "EventDetailPage" });
             :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' : ''"
+            class="bg-elevated/50 ring-default flex items-start gap-3 rounded-lg p-4 ring"
+            :class="event.locationUrl ? 'hover:bg-elevated transition' : ''"
           >
             <UIcon
               name="i-lucide-map-pin"
-              class="mt-0.5 size-5 shrink-0 text-primary"
+              class="text-primary mt-0.5 size-5 shrink-0"
             />
             <div class="min-w-0">
-              <div class="text-xs font-semibold uppercase tracking-wide text-muted">
+              <div class="text-muted text-xs font-semibold uppercase tracking-wide">
                 {{ t("detail.where", "Where?") }}
               </div>
-              <div class="flex items-center gap-1.5 font-medium text-highlighted">
+              <div class="text-highlighted flex items-center gap-1.5 font-medium">
                 {{ tr(event.location) }}
                 <UIcon
                   v-if="event.locationUrl"
                   name="i-lucide-external-link"
-                  class="size-4 text-muted"
+                  class="text-muted size-4"
                 />
               </div>
             </div>
@@ -205,46 +170,42 @@ defineOptions({ name: "EventDetailPage" });
             :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)"
+        <div class="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 text-muted max-w-none"
+              />
+              <div
+                v-else
+                class="text-muted whitespace-pre-line"
+              >
+                {{ tr(event.body ?? event.description) }}
+              </div>
+            </slot>
+          </div>
+          <SectionCard
+            id="tickets"
+            :title="t('detail.tickets.title', 'Tickets')"
+            class="scroll-mt-24 lg:sticky lg:top-24"
           >
-            <MDC
-              v-if="hasMdc"
-              :value="tr(event.body ?? event.description)"
-              class="prose max-w-none text-muted"
+            <EventTicketPicker
+              :ticket-types="event.ticketTypes"
+              :logged-in="loggedIn"
+              :loading="buying"
+              @purchase="onPurchase"
             />
-            <div
-              v-else
-              class="whitespace-pre-line text-muted"
-            >
-              {{ tr(event.body ?? event.description) }}
-            </div>
-          </slot>
+          </SectionCard>
         </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>
+      </UPageBody>
+    </UPage>
   </UContainer>
 </template>

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

@@ -1,9 +1,9 @@
-declare var __VLS_82: {
+declare var __VLS_91: {
     event: any;
     body: any;
 };
 type __VLS_Slots = {} & {
-    body?: (props: typeof __VLS_82) => any;
+    body?: (props: typeof __VLS_91) => 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>;

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

@@ -1,45 +1,47 @@
 <script setup>
+defineOptions({ name: "EventsListPage" });
 const t = useModuleT("events");
 const { grouped } = await useEvents();
-const pages = useRuntimeConfig().public.events?.pages;
-const eventTo = (slug) => (pages?.event || "/events/:slug").replace(":slug", encodeURIComponent(slug));
+const links = useEventLinks();
 const sections = computed(() => [
   { title: t("ongoing.title", "Happening now"), events: grouped.value.ongoing },
   { title: t("upcoming.title", "Upcoming"), events: grouped.value.upcoming },
   { title: t("past.title", "Past events"), events: grouped.value.past }
 ].filter((section) => section.events.length));
-defineOptions({ name: "EventsListPage" });
+useSeoMeta({ title: () => t("title", "Events") });
 </script>
 
 <template>
-  <UContainer class="py-8 sm:py-12">
-    <div class="mb-10 space-y-2 text-center">
-      <h1 class="text-3xl font-bold tracking-tight text-highlighted sm:text-5xl">
-        {{ t("title", "Events") }}
-      </h1>
-    </div>
-    <p
-      v-if="!sections.length"
-      class="text-center text-muted"
-    >
-      {{ t("empty", "There are no events right now.") }}
-    </p>
-    <section
-      v-for="section in sections"
-      :key="section.title"
-      class="mb-12"
-    >
-      <h2 class="mb-4 text-xl font-semibold tracking-tight text-highlighted">
-        {{ section.title }}
-      </h2>
-      <div class="grid gap-6 md:grid-cols-2">
-        <EventCard
-          v-for="item in section.events"
-          :key="item.id"
-          :event="item"
-          :to="eventTo(item.slug)"
+  <UContainer>
+    <UPage>
+      <UPageHeader
+        :title="t('title', 'Events')"
+        :description="t('listDescription', 'Find an event and get your ticket.')"
+      />
+      <UPageBody>
+        <UEmpty
+          v-if="!sections.length"
+          icon="i-lucide-calendar"
+          :title="t('empty', 'There are no events right now.')"
         />
-      </div>
-    </section>
+        <section
+          v-for="section in sections"
+          :key="section.title"
+          class="space-y-4"
+        >
+          <h2 class="text-highlighted text-lg font-semibold">
+            {{ section.title }}
+          </h2>
+          <div class="grid gap-6 md:grid-cols-2">
+            <EventCard
+              v-for="item in section.events"
+              :key="item.id"
+              :event="item"
+              :to="links.event(item.slug)"
+            />
+          </div>
+        </section>
+      </UPageBody>
+    </UPage>
   </UContainer>
 </template>

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

@@ -1,37 +1,30 @@
 <script setup>
+defineOptions({ name: "EventTicketsPage" });
 const t = useModuleT("events");
 const { tickets, pay } = useMyTickets();
-const pages = useRuntimeConfig().public.events?.pages;
-const eventTo = (slug) => (pages?.event || "/events/:slug").replace(":slug", encodeURIComponent(slug));
-const AccountHeader = resolveComponent("AccountHeader");
-const hasAccountHeader = typeof AccountHeader !== "string";
-defineOptions({ name: "EventTicketsPage" });
+const links = useEventLinks();
 </script>
 
 <template>
-  <div>
-    <AccountHeader v-if="hasAccountHeader" />
-    <UContainer :class="hasAccountHeader ? 'pb-10' : 'py-10'">
-      <UPageHeader
-        v-if="!hasAccountHeader"
-        :title="t('myTickets', 'My tickets')"
-        :ui="{ root: 'pt-0 pb-6 mb-6', title: 'text-2xl sm:text-3xl' }"
+  <div class="flex flex-col gap-4">
+    <UEmpty
+      v-if="!tickets.length"
+      icon="i-lucide-ticket"
+      :title="t('noTicketsTitle', 'No tickets yet')"
+      :description="t('noTickets', 'You do not have any tickets yet.')"
+      :actions="[{ label: t('browseEvents', 'Browse events'), to: links.events(), icon: 'i-lucide-calendar' }]"
+    />
+    <div
+      v-else
+      class="grid gap-4 md:grid-cols-2"
+    >
+      <EventTicketCard
+        v-for="ticket in tickets"
+        :key="ticket.id"
+        :ticket="ticket"
+        :to="links.event(ticket.eventSlug)"
+        @pay="pay"
       />
-      <p
-        v-if="!tickets.length"
-        class="text-muted"
-      >
-        {{ t("noTickets", "You do not have any tickets yet.") }}
-      </p>
-      <div class="grid gap-4 md:grid-cols-2">
-        <EventTicketCard
-          v-for="ticket in tickets"
-          :key="ticket.id"
-          :ticket="ticket"
-          :to="eventTo(ticket.eventSlug)"
-          @pay="pay"
-        />
-      </div>
-    </UContainer>
+    </div>
   </div>
 </template>

package/dist/runtime/app/tabs/Attendees.d.vue.ts

@@ -1,6 +1,6 @@
-import type { AdminEvent } from '../utils/admin-event.js';
+import type { StaffEvent } from '../utils/admin-event.js';
 type __VLS_Props = {
-    event: AdminEvent;
+    event: StaffEvent;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/tabs/Attendees.vue

@@ -1,88 +1,92 @@
 <script setup>
-import { useAdminAction } from "../utils/admin-event";
 defineOptions({ name: "EventsAdminAttendeesTab" });
 const props = defineProps({
   event: { type: Object, required: true }
 });
 const t = useModuleT("events");
 const tr = useEventsTranslate();
+const format = useFormat();
 const confirmAction = useConfirmDialog();
-const { run } = useAdminAction();
+const { run } = useAction();
 const { data: attendees, refresh } = await useFetch(() => `/api/events/admin/events/${props.event.id}/tickets`, { default: () => [] });
 const typeName = (ticketTypeId) => tr(props.event.ticketTypes.find((item) => item.id === ticketTypeId)?.name);
-const statusColor = { paid: "success", pending: "warning", cancelled: "neutral", refunded: "neutral", expired: "neutral" };
+const who = (ticket) => ticket.userName || ticket.userEmail || "";
 const ticketAction = async (ticket, action) => {
   const confirmed = await confirmAction({
     title: action === "refund" ? t("admin.confirmRefund", "Refund this ticket?") : t("admin.confirmCancel", "Cancel this ticket?"),
-    confirmText: action === "refund" ? t("admin.refund", "Refund") : t("admin.cancel", "Cancel"),
+    description: action === "refund" ? t("admin.confirmRefundDescription", "The full amount goes back to {name} and the ticket is cancelled.", { name: who(ticket) }) : t("admin.confirmCancelDescription", "The ticket of {name} stops working and its seat is freed.", { name: who(ticket) }),
+    confirmText: action === "refund" ? t("admin.refund", "Refund ticket") : t("admin.cancelTicket", "Cancel ticket"),
     destructive: true
   });
   if (!confirmed) return;
   return run(async () => {
     await $fetch(`/api/events/admin/tickets/${ticket.id}/${action}`, { method: "POST" });
     await refresh();
-  }, action === "refund" ? t("admin.refunded", "Refunded.") : t("admin.cancelled", "Cancelled."));
+  }, { success: action === "refund" ? t("admin.refunded", "Refunded.") : t("admin.cancelled", "Cancelled.") });
 };
-const columns = [
+const menu = (ticket) => {
+  const refund = ticket.status === "paid" && ticket.paymentId ? [{ label: t("admin.refund", "Refund ticket"), icon: "i-lucide-undo-2", onSelect: () => {
+    void ticketAction(ticket, "refund");
+  } }] : [];
+  const cancel = ticket.status === "paid" || ticket.status === "pending" ? [{ label: t("admin.cancelTicket", "Cancel ticket"), icon: "i-lucide-ban", color: "error", onSelect: () => {
+    void ticketAction(ticket, "cancel");
+  } }] : [];
+  return [refund, cancel].filter((group) => group.length);
+};
+const columns = computed(() => [
   { accessorKey: "userName", header: t("admin.attendee", "Attendee") },
   { accessorKey: "ticketTypeId", header: t("admin.ticketType", "Ticket") },
   { accessorKey: "status", header: t("admin.status", "Status") },
   { accessorKey: "checkedInAt", header: t("admin.checkedIn", "Checked in") },
-  { id: "actions", header: "" }
-];
+  { id: "actions" }
+]);
 </script>
 
 <template>
-  <AdminSection :title="t('admin.attendees', 'Attendees')">
-    <template #flush>
-      <UTable
-        v-if="attendees.length"
-        :data="attendees"
-        :columns="columns"
-      >
-        <template #userName-cell="{ row }">
-          <span class="font-medium">{{ row.original.userName }}</span>
-          <span class="text-muted"> · {{ row.original.userEmail }}</span>
-        </template>
-        <template #ticketTypeId-cell="{ row }">
-          {{ typeName(row.original.ticketTypeId) }}
-        </template>
-        <template #status-cell="{ row }">
-          <UBadge
-            variant="subtle"
-            :color="statusColor[row.original.status] ?? 'neutral'"
-            :label="row.original.status"
-          />
-        </template>
-        <template #checkedInAt-cell="{ row }">
-          {{ row.original.checkedInAt ? "\u2713" : "\u2013" }}
-        </template>
-        <template #actions-cell="{ row }">
-          <div class="flex justify-end gap-1">
-            <UButton
-              v-if="row.original.status === 'paid' && row.original.paymentId"
-              size="xs"
-              variant="outline"
-              color="neutral"
-              :label="t('admin.refund', 'Refund')"
-              @click="ticketAction(row.original, 'refund')"
-            />
-            <UButton
-              v-if="row.original.status === 'paid' || row.original.status === 'pending'"
-              size="xs"
-              variant="ghost"
-              color="error"
-              :label="t('admin.cancel', 'Cancel')"
-              @click="ticketAction(row.original, 'cancel')"
-            />
-          </div>
-        </template>
-      </UTable>
-    </template>
-    <AdminEmpty
-      v-if="!attendees.length"
-      icon="i-lucide-users"
-      :title="t('admin.noAttendees', 'No tickets yet.')"
-    />
-  </AdminSection>
+  <SectionCard
+    :title="t('admin.attendees', 'Attendees')"
+    flush
+  >
+    <UTable
+      :data="attendees"
+      :columns="columns"
+      :ui="tableUi({ tr: '' })"
+    >
+      <template #userName-cell="{ row }">
+        <span class="text-highlighted font-medium">{{ row.original.userName }}</span>
+        <span class="text-muted"> · {{ row.original.userEmail }}</span>
+      </template>
+      <template #ticketTypeId-cell="{ row }">
+        {{ typeName(row.original.ticketTypeId) }}
+      </template>
+      <template #status-cell="{ row }">
+        <UBadge
+          variant="subtle"
+          :color="statusColor(row.original.status)"
+          :label="t(`tickets.status.${row.original.status}`, row.original.status)"
+        />
+      </template>
+      <template #checkedInAt-cell="{ row }">
+        <span v-if="row.original.checkedInAt">{{ format.dateTime(row.original.checkedInAt) }}</span>
+        <span
+          v-else
+          class="text-muted"
+        >–</span>
+      </template>
+      <template #actions-cell="{ row }">
+        <RowMenu
+          v-if="menu(row.original).length"
+          :items="menu(row.original)"
+          :subject="who(row.original)"
+        />
+      </template>
+      <template #empty>
+        <UEmpty
+          variant="naked"
+          icon="i-lucide-users"
+          :title="t('admin.noAttendees', 'No tickets yet.')"
+        />
+      </template>
+    </UTable>
+  </SectionCard>
 </template>