@antelopejs/dms 0.6.2 → 0.7.0

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardFrame.vue

@@ -3,8 +3,13 @@ import Container from "./Container.vue";
 import DashboardSidebar from "./DashboardSidebar.vue";
 import DashboardHeader from "./DashboardHeader.vue";
 import DashboardBanners from "./DashboardBanners.vue";
+import GithubStarPrompt from "./GithubStarPrompt.vue";
 import RolePreviewBar from "./RolePreviewBar.vue";
 import { useAppWidgets } from "../../../composables/useAppWidgets";
+import {
+  sidePanelWidthStyle,
+  useActiveSidePanel,
+} from "../../composables/layout/sidePanelState";
 
 // Sidebar sizes are in px (the v2 240px sidebar). The storage key changed with
 // the unit, so a width saved in % is not read back as px.
@@ -23,6 +28,9 @@ const DOCK_CLEARANCE_CLASS =
 // One 40px chip plus its 8px gap per widget, the 10px inset and a 12px margin.
 const DOCK_CHIP_REM = 3;
 const DOCK_EDGE_REM = 1.375;
+// The open side panel is rendered once for the app (`SidePanelHost`), fixed on
+// the right; from `lg` the frame keeps its width free so the page shrinks.
+const SIDE_PANEL_ROOM_CLASS = "lg:end-[min(var(--dms-side-panel-width),60vw)]";
 const dockHeight = (chips: number): string =>
   `${chips * DOCK_CHIP_REM + DOCK_EDGE_REM}rem`;
 
@@ -60,6 +68,17 @@ const regionAttrs = computed(() =>
       }
     : {},
 );
+
+const { panel: sidePanel, width: sidePanelWidth } = useActiveSidePanel();
+// Bound as attributes so a frame without a panel renders no empty `style`.
+const groupAttrs = computed(() =>
+  sidePanel.value
+    ? {
+        class: SIDE_PANEL_ROOM_CLASS,
+        style: sidePanelWidthStyle(sidePanelWidth.value),
+      }
+    : {},
+);
 </script>
 
 <template>
@@ -67,6 +86,7 @@ const regionAttrs = computed(() =>
     data-dms-persistent-shell
     :storage-key="DASHBOARD_STORAGE_KEY"
     :unit="DASHBOARD_SIZE_UNIT"
+    v-bind="groupAttrs"
   >
     <DashboardSidebar />
 
@@ -93,5 +113,7 @@ const regionAttrs = computed(() =>
         <DmsAppWidgetsDock />
       </template>
     </UDashboardPanel>
+
+    <GithubStarPrompt />
   </UDashboardGroup>
 </template>

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardHeader.vue

@@ -3,6 +3,7 @@ import type { BreadcrumbItem, DropdownMenuItem } from "@nuxt/ui";
 import NotificationPopover from "../notification/NotificationPopover.vue";
 import QuickActionsPopover from "./QuickActionsPopover.vue";
 import { useSidebarState } from "./sidebarState";
+import { useHeaderActionControls } from "../../composables/layout/useHeaderActionControls";
 import { usePageRecordLabel } from "#dms-core/app/build/composables/page/usePageRecordLabel";
 
 const HOME_ICON = "i-ph-house-light";
@@ -37,6 +38,11 @@ const builderAction = computed(() =>
 const headerActions = computed(() =>
   registeredActions.value.filter((action) => action.id !== BUILDER_ACTION_ID),
 );
+const {
+  isToggle: isActionToggle,
+  isActive: isActionActive,
+  select: selectAction,
+} = useHeaderActionControls();
 
 const sidebarToggleLabel = computed(() =>
   sidebarCollapsed.value
@@ -233,36 +239,44 @@ const mobileBreadcrumb = computed(
       <template #right>
         <UTooltip
           v-if="builderAction"
-          :text="builderAction.label"
+          :text="processI18n(builderAction.label)"
           :content="TOOLTIP_CONTENT"
         >
           <UButton
             :icon="builderAction.icon || 'i-ph-hammer-light'"
             variant="ghost"
-            :color="builderAction.isActive?.() ? 'primary' : 'neutral'"
+            :color="isActionActive(builderAction) ? 'primary' : 'neutral'"
             :class="
-              builderAction.isActive?.() ? undefined : TOOLBAR_BUTTON_CLASS
+              isActionActive(builderAction) ? undefined : TOOLBAR_BUTTON_CLASS
+            "
+            :aria-label="processI18n(builderAction.label)"
+            :aria-pressed="
+              isActionToggle(builderAction)
+                ? isActionActive(builderAction)
+                : undefined
             "
-            :aria-label="builderAction.label"
             :ui="{ leadingIcon: 'size-[18px]' }"
-            @click="builderAction.onSelect()"
+            @click="selectAction(builderAction)"
           />
         </UTooltip>
 
         <UTooltip
           v-for="action in headerActions"
           :key="action.id"
-          :text="action.label"
+          :text="processI18n(action.label)"
           :content="TOOLTIP_CONTENT"
         >
           <UButton
             :icon="action.icon"
             variant="ghost"
-            color="neutral"
-            :class="TOOLBAR_BUTTON_CLASS"
-            :aria-label="action.label"
+            :color="isActionActive(action) ? 'primary' : 'neutral'"
+            :class="isActionActive(action) ? undefined : TOOLBAR_BUTTON_CLASS"
+            :aria-label="processI18n(action.label)"
+            :aria-pressed="
+              isActionToggle(action) ? isActionActive(action) : undefined
+            "
             :ui="{ leadingIcon: 'size-[18px]' }"
-            @click="action.onSelect?.()"
+            @click="selectAction(action)"
           />
         </UTooltip>
 

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardSidePanel.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+/**
+ * One side panel (see `useAppSidePanels`), fixed on the right of the window.
+ * From `lg` it is docked: every dashboard frame keeps that width free on its
+ * right, so the page shrinks next to it, and a resize handle sits on its inner
+ * edge. Below `lg` the same element is a sheet over the page, above a
+ * backdrop: the switch is CSS only, so crossing the breakpoint never remounts
+ * the panel's component.
+ */
+import { useMediaQuery } from "@vueuse/core";
+import type { SidePanel } from "../../../composables/useAppSidePanels";
+import { useSidePanel } from "../../../composables/useSidePanel";
+import { sidePanelWidthStyle } from "../../composables/layout/sidePanelState";
+import { useSidePanelWidth } from "../../composables/layout/useSidePanelWidth";
+
+interface Props {
+  panel: SidePanel;
+}
+
+const props = defineProps<Props>();
+
+// The panel belongs to the dashboard: a page without its shell (onboarding,
+// an error page) hides it, and keeps it mounted for the way back.
+const HOST_CLASS =
+  "contents [body:not(:has([data-dms-persistent-shell]))_&]:hidden";
+const DESKTOP_QUERY = "(min-width: 1024px)";
+const ESCAPE_KEY = "Escape";
+const PANEL_DOM_ID_PREFIX = "dms-side-panel-";
+
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+const isDocked = useMediaQuery(DESKTOP_QUERY);
+const { close } = useSidePanel(props.panel.id);
+const panelEl = ref<HTMLElement | null>(null);
+const {
+  width,
+  bounds,
+  isDragging,
+  startDrag,
+  drag,
+  endDrag,
+  resizeFromKey,
+  reset,
+} = useSidePanelWidth(props.panel);
+
+const panelDomId = `${PANEL_DOM_ID_PREFIX}${props.panel.id}`;
+const ariaLabel = computed(() =>
+  props.panel.ariaLabel ? processI18n(props.panel.ariaLabel) : undefined,
+);
+const panelStyle = computed(() => sidePanelWidthStyle(width.value));
+const panelComponent = computed(
+  () => resolveDmsComponent(props.panel.component) ?? props.panel.component,
+);
+
+// Escape dismisses the sheet only: docked, the panel is part of the page and
+// its component may give the key a meaning of its own.
+function closeSheetOnEscape(event: KeyboardEvent): void {
+  if (event.key !== ESCAPE_KEY || isDocked.value) return;
+  close();
+}
+
+function startHandleDrag(event: PointerEvent): void {
+  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+  const renderedWidth = panelEl.value?.getBoundingClientRect().width;
+  startDrag(event, renderedWidth || width.value);
+}
+
+let focusBeforeOpen: HTMLElement | null = null;
+
+function isFocusInside(): boolean {
+  return panelEl.value?.contains(document.activeElement) ?? false;
+}
+
+// The sheet covers the page, so focus moves into it unless the panel's own
+// component already took it; closing gives focus back to where it came from.
+onMounted(() => {
+  const active = document.activeElement;
+  focusBeforeOpen = active instanceof HTMLElement ? active : null;
+  if (isDocked.value || isFocusInside()) return;
+  panelEl.value?.focus();
+});
+
+onBeforeUnmount(() => {
+  if (isFocusInside()) focusBeforeOpen?.focus();
+});
+</script>
+
+<template>
+  <div data-dms-side-panel-host :class="HOST_CLASS">
+    <button
+      type="button"
+      aria-hidden="true"
+      tabindex="-1"
+      data-dms-side-panel-backdrop
+      class="bg-elevated/75 fixed inset-0 z-40 lg:hidden"
+      @click="close"
+    />
+
+    <aside
+      :id="panelDomId"
+      ref="panelEl"
+      data-dms-side-panel
+      :data-dragging="isDragging || undefined"
+      :aria-label="ariaLabel"
+      tabindex="-1"
+      class="border-default fixed inset-y-0 end-0 flex w-(--dms-side-panel-width) max-w-full min-w-0 flex-col border-s bg-(--dms-bg-sidebar) outline-none max-lg:z-50 max-lg:shadow-xl lg:max-w-[60vw]"
+      :style="panelStyle"
+      @keydown="closeSheetOnEscape"
+    >
+      <div
+        role="separator"
+        aria-orientation="vertical"
+        tabindex="0"
+        data-dms-side-panel-handle
+        :aria-controls="panelDomId"
+        :aria-label="t('side_panel.resize')"
+        :aria-valuenow="width"
+        :aria-valuemin="bounds.minWidth"
+        :aria-valuemax="bounds.maxWidth"
+        class="group/handle absolute inset-y-0 -start-1 z-10 hidden w-2 cursor-ew-resize touch-none outline-none select-none lg:block"
+        @pointerdown="startHandleDrag"
+        @pointermove="drag"
+        @pointerup="endDrag"
+        @pointercancel="endDrag"
+        @lostpointercapture="endDrag"
+        @keydown="resizeFromKey"
+        @dblclick="reset"
+      >
+        <span
+          aria-hidden="true"
+          class="group-hover/handle:bg-primary group-focus-visible/handle:bg-primary absolute inset-y-0 start-1/2 w-0.5 -translate-x-1/2 transition-colors motion-reduce:transition-none"
+          :class="{ 'bg-primary': isDragging }"
+        />
+      </div>
+
+      <component :is="panelComponent" class="min-h-0 flex-1" />
+    </aside>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/layout/Footer.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { SelectItem } from "@nuxt/ui";
+import {
+  GITHUB_REPOSITORY,
+  GITHUB_REPOSITORY_URL,
+} from "../../utils/github-repository";
 
 const EXTERNAL_LINK_PATTERN = /^https?:\/\//;
-const GITHUB_REPOSITORY = "AntelopeJS/dms";
-const GITHUB_REPOSITORY_URL = `https://github.com/${GITHUB_REPOSITORY}`;
 const GITHUB_REPOSITORY_API = `https://api.github.com/repos/${GITHUB_REPOSITORY}`;
 const GITHUB_STARS_CACHE_KEY = "dms-github-stars";
 // GitHub allows 60 anonymous API calls an hour per visitor: the count is

package/frontend-vue/layers/dms-layout/app/build/components/layout/GithubStarPrompt.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { isFloatingSaveBarShown } from "#dms-ui/app/build/composables/form/floatingSaveBars";
+import { useGithubStarPrompt } from "../../composables/general/useGithubStarPrompt";
+
+const TITLE_ID = "dms-github-star-prompt-title";
+const DESCRIPTION_ID = "dms-github-star-prompt-description";
+
+const { t } = useI18n();
+const { user } = useCurrentUser();
+const toast = useToast();
+
+// Developers only: a production build, a client's dashboard included, never
+// counts, stores or shows anything. The same flag gates the dev reload.
+const { isDue, snooze, star, dismiss } = useGithubStarPrompt(
+  import.meta.env.DEV,
+);
+
+// The toaster stacks in the same corner, and a floating save bar sticks to
+// the bottom of the panel: the prompt steps aside while either is up rather
+// than cover it.
+const isShown = computed(
+  () =>
+    isDue.value &&
+    !!user.value &&
+    toast.toasts.value.length === 0 &&
+    !isFloatingSaveBarShown.value,
+);
+</script>
+
+<template>
+  <!-- A non-modal dialog that takes no focus: it waits at the end of the tab
+       order. Toast look (theme/surfaces.ts), in the toaster's corner and
+       width, rising into place like a toast. The buttons take the card's
+       full width, so the longer French label still fits beside "Later".
+       On a phone it tightens and drops the icon, so the text runs the full
+       width and covers less of the page. From `lg` it stays clear of an
+       open side panel, whose width the dashboard frame sets. -->
+  <div
+    v-if="isShown"
+    role="dialog"
+    :aria-labelledby="TITLE_ID"
+    :aria-describedby="DESCRIPTION_ID"
+    class="bg-default ring-accented fixed inset-x-3 bottom-3 z-50 rounded-(--dms-radius-card) p-3 shadow-(--dms-shadow-pop) ring transition duration-300 ease-out motion-reduce:transition-none sm:inset-x-auto sm:right-5 sm:bottom-5 sm:w-[380px] sm:p-3.5 sm:ps-4 lg:right-[calc(min(var(--dms-side-panel-width,0px),60vw)+1.25rem)] starting:translate-y-4 starting:opacity-0"
+  >
+    <div class="flex items-start gap-3 pe-6">
+      <DmsIconWell icon="i-ph-star" size="sm" class="max-sm:hidden" />
+      <div class="min-w-0 flex-1">
+        <h2
+          :id="TITLE_ID"
+          class="text-highlighted text-[13px]/[1.35] font-semibold"
+        >
+          {{ t("github_star_prompt.title") }}
+        </h2>
+        <p :id="DESCRIPTION_ID" class="text-muted mt-0.5 text-[13px]/[1.45]">
+          {{ t("github_star_prompt.description") }}
+        </p>
+      </div>
+    </div>
+    <div class="mt-2.5 flex flex-wrap justify-end gap-1.5 sm:mt-3">
+      <UButton
+        size="sm"
+        color="neutral"
+        variant="outline"
+        :label="t('github_star_prompt.later')"
+        data-action="later"
+        @click="snooze"
+      />
+      <UButton
+        size="sm"
+        icon="i-ph-star"
+        :label="t('github_star_prompt.star')"
+        data-action="star"
+        @click="star"
+      />
+    </div>
+    <UButton
+      size="xs"
+      color="neutral"
+      variant="ghost"
+      square
+      icon="i-ph-x"
+      class="text-dimmed hover:text-highlighted absolute top-2.5 right-2.5"
+      :aria-label="t('github_star_prompt.close')"
+      :title="t('github_star_prompt.close')"
+      data-action="close"
+      @click="dismiss"
+    />
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/layout/SidePanelHost.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+/**
+ * Renders the open side panel (see `useSidePanel`) once for the whole app,
+ * registered as an app overlay: outside the routed layouts, so moving between
+ * the default and settings layouts keeps the panel's component mounted. The
+ * server renders it from the side panel cookie, in place on the first paint.
+ * Keyed by panel id, so each panel keeps its own focus bookkeeping.
+ */
+import DashboardSidePanel from "./DashboardSidePanel.vue";
+import { useActiveSidePanel } from "../../composables/layout/sidePanelState";
+
+const { panel } = useActiveSidePanel();
+</script>
+
+<template>
+  <DashboardSidePanel v-if="panel" :key="panel.id" :panel="panel" />
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/notification/NotificationPopover.vue

@@ -5,6 +5,7 @@ import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBad
 import { settleWidgetRequest } from "./widgetRequest";
 import type { UserNotification } from "../../../composables/notification/useNotifications";
 import { resolveNotificationTone } from "../pages/settings/notification/notificationDisplay";
+import { DMS_TONE_SOLID, iconWellToneOf } from "#dms-ui/app/build/utils/tone";
 import DmsRowSkeleton from "#dms-ui/app/build/components/skeleton/RowSkeleton.vue";
 
 const MAX_DISPLAYED_COUNT = 99;
@@ -23,13 +24,12 @@ const { loggedIn } = useUserSession();
 const { processI18n } = useTranslation();
 const {
   unreadCount,
-  unseenCount,
+  unreadTone,
   notifications,
   hasMore,
   fetchBellCounts,
   fetchNotifications,
   markAsRead,
-  markAllSeen,
 } = useNotifications();
 const { setNavBadge } = useNavBadges();
 const isOpen = ref(false);
@@ -46,37 +46,36 @@ const { isLoadingMore, setupObserver, disconnectObserver } = useInfiniteScroll(
 
 // The sender's tone (a warning, a success) colours the icon well, as in the
 // inbox; untoned notifications keep the accent until read.
-const iconWellTone = (notification: UserNotification) => {
-  const tone = resolveNotificationTone(notification);
-  return tone === "neutral" ? "muted" : tone;
-};
+const iconWellTone = (notification: UserNotification) =>
+  iconWellToneOf(resolveNotificationTone(notification));
 
 const formatCount = (count: number) =>
   count > MAX_DISPLAYED_COUNT ? `${MAX_DISPLAYED_COUNT}+` : String(count);
 
-// The bell's badge counts what arrived since it was last opened (unseen);
-// opening it resets the badge but leaves the notifications unread.
-const displayedCount = computed(() => formatCount(unseenCount.value));
+// The bell's badge counts what is unread, in the tone of the most important
+// unread notification; opening the bell changes neither.
+const displayedCount = computed(() => formatCount(unreadCount.value));
+const badgeToneClass = computed(
+  () => DMS_TONE_SOLID[unreadTone.value ?? "neutral"],
+);
 
-// The bell is on every page, so it keeps the unread badge of the
-// Notifications entry in the navigation current between two menu loads:
-// that one counts what is still unread, seen or not.
-watch(unreadCount, (count) => {
-  setNavBadge(NOTIFICATIONS_SETTINGS_PAGE, count > 0 ? formatCount(count) : "");
+// The bell is on every page, so it keeps the badge of the Notifications
+// entry in the navigation current between two menu loads: the same count,
+// in the same tone.
+watch([unreadCount, unreadTone], ([count, tone]) => {
+  setNavBadge(
+    NOTIFICATIONS_SETTINGS_PAGE,
+    count > 0 ? formatCount(count) : "",
+    tone,
+  );
 });
 
 const refreshCounts = () =>
   settleWidgetRequest(fetchBellCounts, () => {
     unreadCount.value = 0;
-    unseenCount.value = 0;
+    unreadTone.value = undefined;
   });
 
-const handleNotificationEvent = async () => {
-  if (!isOpen.value) {
-    await refreshCounts();
-  }
-};
-
 const handleFormSubmitSuccess = async (event: Event) => {
   const customEvent = event as CustomEvent;
   const submitUrl = customEvent.detail?.data?.submitUrl;
@@ -88,20 +87,10 @@ const handleFormSubmitSuccess = async (event: Event) => {
   }
 };
 
-// Seeing is not reading: the notifications stay unread until opened or
-// marked read, in the popover or the inbox.
-const markSeen = async () => {
-  if (unseenCount.value > 0) await settleWidgetRequest(markAllSeen);
-};
-
 onMounted(async () => {
   if (!loggedIn.value) return;
   await refreshCounts();
 
-  window.addEventListener(
-    NotificationEvents.NOTIFICATION_RECEIVED,
-    handleNotificationEvent as EventListener,
-  );
   window.addEventListener(
     FormEvents.SUBMIT_SUCCESS,
     handleFormSubmitSuccess as EventListener,
@@ -111,10 +100,6 @@ onMounted(async () => {
 onUnmounted(() => {
   disconnectObserver();
 
-  window.removeEventListener(
-    NotificationEvents.NOTIFICATION_RECEIVED,
-    handleNotificationEvent as EventListener,
-  );
   window.removeEventListener(
     FormEvents.SUBMIT_SUCCESS,
     handleFormSubmitSuccess as EventListener,
@@ -124,17 +109,12 @@ onUnmounted(() => {
 watch(isOpen, async (isNowOpen) => {
   if (isNowOpen) {
     isListLoading.value = true;
-    await Promise.all([
-      markSeen(),
-      settleWidgetRequest(() => fetchNotifications(true)),
-    ]);
+    await settleWidgetRequest(() => fetchNotifications(true));
     isListLoading.value = false;
     await nextTick();
     setupObserver();
   } else {
     disconnectObserver();
-    // What arrived while the list was open showed at its top: seen too.
-    await markSeen();
   }
 });
 
@@ -175,8 +155,10 @@ const goToNotifications = () => {
         <!-- Floats over the button's corner (nothing moves) and fades in
              (starting style) once the count, fetched after mount, is back. -->
         <span
-          v-if="unseenCount > 0"
-          class="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-(--dms-accent-fill) px-1 text-[10px] leading-none font-semibold text-(--dms-accent-on-fill) ring-2 ring-(--ui-bg-muted) transition-opacity duration-200 starting:opacity-0"
+          v-if="unreadCount > 0"
+          data-bell-badge
+          :class="badgeToneClass"
+          class="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-none font-semibold ring-2 ring-(--ui-bg-muted) transition-opacity duration-200 starting:opacity-0"
         >
           {{ displayedCount }}
         </span>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/members/MemberRolePicker.vue

@@ -20,6 +20,8 @@ interface RoleOption {
   _id: string;
   name: string;
   permissionIds: string[];
+  /** Set when what the role grants amounts to owner-level access. */
+  warnings?: string[];
 }
 
 interface RoleOptionsResponse {
@@ -77,8 +79,7 @@ const isOwner = computed(
   () => !!props.ownerField && formState?.value?.[props.ownerField] === true,
 );
 const isInert = computed(() => props.disabled || isOwner.value);
-// Without an owner field (the invite form), the form disables the roles for
-// an owner only.
+// Without an owner field, the form disables the roles for an owner only.
 const showsOwnerHint = computed(() =>
   props.ownerField ? isOwner.value : props.disabled,
 );
@@ -102,6 +103,19 @@ const roleItems = computed<ChipGroupItem[]>(() =>
 const selectedRoles = computed(() =>
   options.value.roles.filter((role) => selectedIds.value.has(role._id)),
 );
+// An owner holds every permission anyway: no warning then.
+const ownerLevelWarning = computed(() => {
+  if (isOwner.value) return undefined;
+  const names = selectedRoles.value
+    .filter((role) => (role.warnings?.length ?? 0) > 0)
+    .map((role) => role.name);
+  if (names.length === 0) return undefined;
+  return t(
+    "page.settings.members.invite.roles_owner_level",
+    { roles: names.join(" + ") },
+    names.length,
+  );
+});
 const grantedCount = computed(
   () => new Set(selectedRoles.value.flatMap((role) => role.permissionIds)).size,
 );
@@ -180,5 +194,13 @@ function toggle(roleId: string) {
         {{ t("page.settings.members.invite.compare_roles") }}
       </ULink>
     </p>
+    <p
+      v-if="ownerLevelWarning"
+      class="text-warning flex items-start gap-1.5 text-xs"
+      data-role-owner-level
+    >
+      <UIcon name="i-ph-warning" class="mt-px size-3.5 shrink-0" />
+      <span>{{ ownerLevelWarning }}</span>
+    </p>
   </div>
 </template>