@svadmin/lite 0.1.0 → 0.2.1

package/src/components/layout/LiteSidebar.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { ResourceDefinition, MenuItem } from '@svadmin/core';
+
+  interface Props {
+    resources: ResourceDefinition[];
+    currentResource?: string;
+    brandName?: string;
+    userName?: string;
+    basePath?: string;
+    menu?: MenuItem[];
+  }
+
+  let {
+    resources,
+    currentResource = '',
+    brandName = 'Admin',
+    userName = '',
+    basePath = '/lite',
+    menu,
+  }: Props = $props();
+
+  const menuResources = $derived(
+    resources.filter((r: ResourceDefinition) => r.showInMenu !== false)
+  );
+
+  function isActive(href: string | undefined): boolean {
+    if (!href) return false;
+    return currentResource === href.replace(basePath + '/', '');
+  }
+
+  function hasActiveChild(children?: MenuItem[]): boolean {
+    if (!children) return false;
+    return children.some(c => isActive(c.href ?? `${basePath}/${c.name}`));
+  }
+</script>
+
+<nav class="lite-sidebar">
+  <div class="lite-sidebar-brand">{brandName}</div>
+  {#if menu && menu.length > 0}
+    {#each menu as item}
+      {#if item.children && item.children.length > 0}
+        <details class="lite-menu-group" open={hasActiveChild(item.children)}>
+          <summary class="lite-menu-parent">{item.label ?? item.name}</summary>
+          {#each item.children as child}
+            {#if child.children && child.children.length > 0}
+              <details class="lite-menu-group" style="margin-left:12px" open={hasActiveChild(child.children)}>
+                <summary class="lite-menu-parent">{child.label ?? child.name}</summary>
+                {#each child.children as grandchild}
+                  <a
+                    href={grandchild.href ?? `${basePath}/${grandchild.name}`}
+                    class={isActive(grandchild.href ?? `${basePath}/${grandchild.name}`) ? 'active' : ''}
+                    target={grandchild.target === '_blank' ? '_blank' : undefined}
+                    style="padding-left:40px"
+                  >{grandchild.label ?? grandchild.name}</a>
+                {/each}
+              </details>
+            {:else}
+              <a
+                href={child.href ?? `${basePath}/${child.name}`}
+                class={isActive(child.href ?? `${basePath}/${child.name}`) ? 'active' : ''}
+                target={child.target === '_blank' ? '_blank' : undefined}
+                style="padding-left:28px"
+              >{child.label ?? child.name}</a>
+            {/if}
+          {/each}
+        </details>
+      {:else}
+        <a
+          href={item.href ?? `${basePath}/${item.name}`}
+          class={isActive(item.href ?? `${basePath}/${item.name}`) ? 'active' : ''}
+          target={item.target === '_blank' ? '_blank' : undefined}
+        >{item.label ?? item.name}</a>
+      {/if}
+    {/each}
+  {:else}
+    {#each menuResources as res}
+      <a
+        href="{basePath}/{res.name}"
+        class={res.name === currentResource ? 'active' : ''}
+      >
+        {res.label ?? res.name}
+      </a>
+    {/each}
+  {/if}
+  {#if userName}
+    <div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;border-top:1px solid #334155;font-size:12px;color:#94a3b8;">
+      {userName}
+      <form method="POST" action="{basePath}/login?/logout" style="display:inline;margin-left:8px;">
+        <button type="submit" class="lite-btn lite-btn-sm" style="color:#94a3b8;border-color:#475569;background:transparent;padding:2px 8px;">Logout</button>
+      </form>
+    </div>
+  {/if}
+</nav>

package/src/components/layout/index.ts

@@ -0,0 +1,8 @@
+export { default as LiteSidebar } from './LiteSidebar.svelte';
+export { default as LiteHeader } from './LiteHeader.svelte';
+export { default as LiteNavigateToResource } from './LiteNavigateToResource.svelte';
+export { default as LiteCatchAllNavigate } from './LiteCatchAllNavigate.svelte';
+export { default as LiteCanAccess } from './LiteCanAccess.svelte';
+export { default as LiteAuthenticated } from './LiteAuthenticated.svelte';
+export { default as LiteErrorComponent } from './LiteErrorComponent.svelte';
+export { default as LiteErrorBoundary } from './LiteErrorBoundary.svelte';

package/src/components/pages/LiteCreatePage.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import LiteForm from '../LiteForm.svelte';
+  import LiteListButton from '../buttons/LiteListButton.svelte';
+
+  interface Props {
+    resource: ResourceDefinition;
+    errors?: Record<string, string[]>;
+    values?: Record<string, unknown>;
+    basePath?: string;
+  }
+
+  let {
+    resource,
+    errors = {},
+    values = {},
+    basePath = '/lite',
+  }: Props = $props();
+</script>
+
+<div class="lite-page">
+  <div class="lite-page-header">
+    <h1 class="lite-page-title">{t('common.create') || 'Create'} {resource.label || resource.name}</h1>
+    <div class="lite-page-actions">
+      <LiteListButton resource={resource.name} {basePath} />
+    </div>
+  </div>
+
+  <LiteForm
+    fields={resource.fields}
+    mode="create"
+    {resource}
+    {errors}
+    {values}
+    action="?/{resource.name}_create"
+    cancelUrl="{basePath}/{resource.name}"
+  />
+</div>

package/src/components/pages/LiteEditPage.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import LiteForm from '../LiteForm.svelte';
+  import LiteListButton from '../buttons/LiteListButton.svelte';
+  import LiteShowButton from '../buttons/LiteShowButton.svelte';
+  import LiteDeleteButton from '../buttons/LiteDeleteButton.svelte';
+
+  interface Props {
+    resource: ResourceDefinition;
+    record: Record<string, unknown>;
+    errors?: Record<string, string[]>;
+    basePath?: string;
+    canDelete?: boolean;
+    canShow?: boolean;
+  }
+
+  let {
+    resource,
+    record,
+    errors = {},
+    basePath = '/lite',
+    canDelete = true,
+    canShow = true,
+  }: Props = $props();
+
+  const pk = resource.primaryKey ?? 'id';
+  const idStr = String(record[pk]);
+</script>
+
+<div class="lite-page">
+  <div class="lite-page-header">
+    <h1 class="lite-page-title">{t('common.edit') || 'Edit'} {resource.label || resource.name} #{idStr}</h1>
+    <div class="lite-page-actions">
+      {#if canShow}
+        <LiteShowButton resource={resource.name} recordItemId={idStr} {basePath} />
+      {/if}
+      <LiteListButton resource={resource.name} {basePath} />
+      {#if canDelete}
+        <LiteDeleteButton resource={resource.name} recordItemId={idStr} redirectUrl="{basePath}/{resource.name}" {basePath} />
+      {/if}
+    </div>
+  </div>
+
+  <LiteForm
+    fields={resource.fields}
+    mode="edit"
+    {resource}
+    {errors}
+    values={record}
+    action="?/{resource.name}_update"
+    cancelUrl="{basePath}/{resource.name}"
+  />
+</div>

package/src/components/pages/LiteForgotPasswordPage.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  interface Props {
+    title?: string;
+    description?: string;
+    action?: string;
+    loginUrl?: string;
+    errors?: string[];
+    successMessage?: string;
+  }
+
+  let {
+    title = 'Forgot Password',
+    description = 'Enter your email to receive a password reset link',
+    action = '?/forgot_password',
+    loginUrl = '/lite/login',
+    errors = [],
+    successMessage = '',
+  }: Props = $props();
+</script>
+
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+  <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
+    <div style="text-align: center; margin-bottom: 24px;">
+      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+    </div>
+
+    <!-- Native form action -->
+    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+      <div class="lite-form-group">
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" class="lite-input" required />
+      </div>
+
+      {#if errors.length > 0}
+        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+          <ul style="margin: 0; padding-left: 20px;">
+            {#each errors as err}
+              <li>{err}</li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+
+      {#if successMessage}
+        <div style="padding: 12px; background: #ecfdf5; border-radius: 6px; color: #10b981; font-size: 13px;">
+          {successMessage}
+        </div>
+      {/if}
+
+      <button type="submit" class="lite-btn lite-btn-primary" style="width: 100%; justify-content: center; padding: 10px;">
+        Send Reset Link
+      </button>
+
+      <div style="text-align: center; font-size: 13px; color: #64748b; margin-top: 8px;">
+        Remember your password? <a href={loginUrl} style="color: #2563eb; text-decoration: none;">Back to Login</a>
+      </div>
+    </form>
+  </div>
+</div>

package/src/components/pages/LiteListPage.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import LiteTable from '../LiteTable.svelte';
+  import LitePagination from '../LitePagination.svelte';
+  import LiteSearch from '../LiteSearch.svelte';
+  import LiteCreateButton from '../buttons/LiteCreateButton.svelte';
+  import LiteRefreshButton from '../buttons/LiteRefreshButton.svelte';
+
+  interface Props {
+    resource: ResourceDefinition;
+    records: Record<string, unknown>[];
+    total: number;
+    pagination: { page: number; perPage: number };
+    currentSort?: string;
+    currentOrder?: 'asc' | 'desc';
+    currentSearch?: string;
+    basePath?: string;
+    canCreate?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
+  }
+
+  let {
+    resource,
+    records,
+    total,
+    pagination,
+    currentSort,
+    currentOrder = 'asc',
+    currentSearch,
+    basePath = '/lite',
+    canCreate = true,
+    canEdit = true,
+    canDelete = true,
+  }: Props = $props();
+</script>
+
+<div class="lite-page">
+  <div class="lite-page-header">
+    <h1 class="lite-page-title">{resource.label || resource.name} {t('common.list') || 'List'}</h1>
+    <div class="lite-page-actions">
+      {#if canCreate}
+        <LiteCreateButton resource={resource.name} {basePath} />
+      {/if}
+      <LiteRefreshButton hideText />
+    </div>
+  </div>
+
+  <div class="lite-card" style="margin-bottom: 20px;">
+    <div style="padding: 16px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
+      <LiteSearch defaultValue={currentSearch} placeholder={t('common.search') || 'Search...'} />
+      <span style="font-size: 13px; color: #64748b;">
+        {t('common.total') || 'Total'}: {total}
+      </span>
+    </div>
+
+    <LiteTable
+      {records}
+      {resource}
+      {currentSort}
+      {currentOrder}
+      {currentSearch}
+      {basePath}
+      {canEdit}
+      {canDelete}
+    />
+    
+    {#if total > pagination.perPage}
+      <LitePagination
+        page={pagination.page}
+        perPage={pagination.perPage}
+        {total}
+      />
+    {/if}
+  </div>
+</div>

package/src/components/pages/LiteProfilePage.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+
+  interface Props {
+    user: { id?: string | number; name?: string; email?: string; [key: string]: unknown };
+    action?: string;
+    errors?: string[];
+    successMessage?: string;
+  }
+
+  let {
+    user,
+    action = '?/update_profile',
+    errors = [],
+    successMessage = '',
+  }: Props = $props();
+</script>
+
+<div class="lite-page">
+  <div class="lite-page-header">
+    <h1 class="lite-page-title">{t('common.profile') || 'User Profile'}</h1>
+  </div>
+
+  <div class="lite-card" style="max-width: 600px; margin: 0 auto; padding: 24px;">
+    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+      <div class="lite-form-group">
+        <label for="name">Name</label>
+        <input type="text" id="name" name="name" class="lite-input" value={user?.name ?? ''} />
+      </div>
+
+      <div class="lite-form-group">
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" class="lite-input" value={user?.email ?? ''} required />
+      </div>
+      
+      <!-- Password update fields can be added here or handled in a separate form -->
+
+      {#if errors.length > 0}
+        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+          <ul style="margin: 0; padding-left: 20px;">
+            {#each errors as err}
+              <li>{err}</li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+
+      {#if successMessage}
+        <div style="padding: 12px; background: #ecfdf5; border-radius: 6px; color: #10b981; font-size: 13px;">
+          {successMessage}
+        </div>
+      {/if}
+
+      <div style="display: flex; justify-content: flex-end; margin-top: 8px;">
+        <button type="submit" class="lite-btn lite-btn-primary">
+          {t('common.save') || 'Save Profile'}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

package/src/components/pages/LiteRegisterPage.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+
+  interface Props {
+    title?: string;
+    description?: string;
+    action?: string;
+    loginUrl?: string;
+    errors?: string[];
+  }
+
+  let {
+    title = 'Register',
+    description = 'Create a new account',
+    action = '?/register',
+    loginUrl = '/lite/login',
+    errors = [],
+  }: Props = $props();
+</script>
+
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+  <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
+    <div style="text-align: center; margin-bottom: 24px;">
+      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+    </div>
+
+    <!-- We use native form action -->
+    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+      <div class="lite-form-group">
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" class="lite-input" required />
+      </div>
+
+      <div class="lite-form-group">
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" class="lite-input" required minlength="6" />
+      </div>
+
+      <div class="lite-form-group">
+        <label for="confirmPassword">Confirm Password</label>
+        <input type="password" id="confirmPassword" name="confirmPassword" class="lite-input" required minlength="6" />
+      </div>
+
+      {#if errors.length > 0}
+        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+          <ul style="margin: 0; padding-left: 20px;">
+            {#each errors as err}
+              <li>{err}</li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+
+      <button type="submit" class="lite-btn lite-btn-primary" style="width: 100%; justify-content: center; padding: 10px;">
+        Register
+      </button>
+
+      <div style="text-align: center; font-size: 13px; color: #64748b; margin-top: 8px;">
+        Already have an account? <a href={loginUrl} style="color: #2563eb; text-decoration: none;">Login</a>
+      </div>
+    </form>
+  </div>
+</div>

package/src/components/pages/LiteShowPage.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import LiteShowField from '../LiteShowField.svelte';
+  import LiteListButton from '../buttons/LiteListButton.svelte';
+  import LiteEditButton from '../buttons/LiteEditButton.svelte';
+  import LiteDeleteButton from '../buttons/LiteDeleteButton.svelte';
+
+  interface Props {
+    resource: ResourceDefinition;
+    record: Record<string, unknown>;
+    basePath?: string;
+    canEdit?: boolean;
+    canDelete?: boolean;
+  }
+
+  let {
+    resource,
+    record,
+    basePath = '/lite',
+    canEdit = true,
+    canDelete = true,
+  }: Props = $props();
+
+  const pk = resource.primaryKey ?? 'id';
+  const idStr = String(record[pk]);
+  
+  const showFields = $derived(
+    resource.fields.filter(f => f.showInShow !== false)
+  );
+</script>
+
+<div class="lite-page">
+  <div class="lite-page-header">
+    <h1 class="lite-page-title">{t('common.show') || 'Show'} {resource.label || resource.name} #{idStr}</h1>
+    <div class="lite-page-actions">
+      {#if canEdit}
+        <LiteEditButton resource={resource.name} recordItemId={idStr} {basePath} />
+      {/if}
+      <LiteListButton resource={resource.name} {basePath} />
+      {#if canDelete}
+        <LiteDeleteButton resource={resource.name} recordItemId={idStr} redirectUrl="{basePath}/{resource.name}" {basePath} />
+      {/if}
+    </div>
+  </div>
+
+  <div class="lite-card" style="padding: 24px;">
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;">
+      {#each showFields as field}
+        <div>
+          <label style="display: block; font-size: 13px; font-weight: 500; color: #64748b; margin-bottom: 8px;">
+            {field.label}
+          </label>
+          <div style="color: #0f172a; font-size: 14px;">
+            <LiteShowField {field} value={record[field.key]} />
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>

package/src/components/pages/LiteUpdatePasswordPage.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  interface Props {
+    title?: string;
+    description?: string;
+    action?: string;
+    errors?: string[];
+  }
+
+  let {
+    title = 'Update Password',
+    description = 'Enter your new password below.',
+    action = '?/update_password',
+    errors = [],
+  }: Props = $props();
+</script>
+
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+  <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
+    <div style="text-align: center; margin-bottom: 24px;">
+      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+    </div>
+
+    <!-- Native form action -->
+    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+      <div class="lite-form-group">
+        <label for="password">New Password</label>
+        <input type="password" id="password" name="password" class="lite-input" required minlength="6" />
+      </div>
+
+      <div class="lite-form-group">
+        <label for="confirmPassword">Confirm New Password</label>
+        <input type="password" id="confirmPassword" name="confirmPassword" class="lite-input" required minlength="6" />
+      </div>
+
+      {#if errors.length > 0}
+        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+          <ul style="margin: 0; padding-left: 20px;">
+            {#each errors as err}
+              <li>{err}</li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+
+      <button type="submit" class="lite-btn lite-btn-primary" style="width: 100%; justify-content: center; padding: 10px;">
+        Update Password
+      </button>
+    </form>
+  </div>
+</div>

package/src/components/pages/index.ts

@@ -0,0 +1,8 @@
+export { default as LiteListPage } from './LiteListPage.svelte';
+export { default as LiteCreatePage } from './LiteCreatePage.svelte';
+export { default as LiteEditPage } from './LiteEditPage.svelte';
+export { default as LiteShowPage } from './LiteShowPage.svelte';
+export { default as LiteRegisterPage } from './LiteRegisterPage.svelte';
+export { default as LiteForgotPasswordPage } from './LiteForgotPasswordPage.svelte';
+export { default as LiteUpdatePasswordPage } from './LiteUpdatePasswordPage.svelte';
+export { default as LiteProfilePage } from './LiteProfilePage.svelte';

package/src/components/widgets/LiteAnomalyBadge.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  /**
+   * SSR AnomalyBadge — Rendered as a static colored badge.
+   * The SPA version has tooltips (requires JS). In lite mode,
+   * we use a title attribute for the tooltip fallback.
+   */
+  interface Props {
+    value: number;
+    baseline: number;
+    threshold?: number;
+    formatter?: (val: number) => string;
+    lowerIsBetter?: boolean;
+  }
+
+  let {
+    value,
+    baseline,
+    threshold = 0.2,
+    formatter = (v: number) => v.toString(),
+    lowerIsBetter = false,
+  }: Props = $props();
+
+  const diff = $derived(baseline === 0 ? 0 : (value - baseline) / Math.abs(baseline));
+  const isAnomaly = $derived(Math.abs(diff) >= threshold);
+  const isGood = $derived(!isAnomaly ? null : (lowerIsBetter ? diff < 0 : diff > 0));
+  const percentLabel = $derived(`${Math.abs(diff * 100).toFixed(1)}%`);
+  const arrow = $derived(diff > 0 ? '↑' : '↓');
+</script>
+
+{#if !isAnomaly}
+  <span style="font-size: 14px; color: #64748b;">{formatter(value)}</span>
+{:else}
+  <span
+    title="Baseline: {formatter(baseline)} ({diff > 0 ? '+' : '-'}{percentLabel})"
+    class="lite-badge"
+    style="background: {isGood ? '#ecfdf5' : '#fef2f2'}; color: {isGood ? '#065f46' : '#991b1b'}; border: 1px solid {isGood ? '#a7f3d0' : '#fecaca'};"
+  >
+    {arrow} {formatter(value)}
+  </span>
+{/if}

package/src/components/widgets/LiteBarChart.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  /**
+   * SSR BarChart — Rendered as a pure CSS horizontal bar chart.
+   * No charting library needed. Data is rendered server-side as
+   * colored div bars with percentage widths.
+   */
+  interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  interface Props {
+    data: DataPoint[];
+    title?: string;
+  }
+
+  let { data, title }: Props = $props();
+
+  const maxValue = $derived(Math.max(...data.map(d => d.value), 1));
+</script>
+
+<div class="lite-card" style="margin-bottom: 16px;">
+  {#if title}
+    <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a;">
+      {title}
+    </div>
+  {/if}
+  <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
+    {#each data as point}
+      <div>
+        <div style="display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px;">
+          <span style="color: #334155;">{point.label}</span>
+          <span style="color: #64748b; font-weight: 500;">{point.value}</span>
+        </div>
+        <div style="height: 20px; background: #f1f5f9; border-radius: 4px; overflow: hidden;">
+          <div style="height: 100%; width: {(point.value / maxValue) * 100}%; background: {point.color ?? '#6366f1'}; border-radius: 4px; transition: width 0.3s;"></div>
+        </div>
+      </div>
+    {/each}
+    {#if data.length === 0}
+      <p style="color: #94a3b8; font-style: italic; text-align: center;">No data</p>
+    {/if}
+  </div>
+</div>