@svadmin/ui 0.64.0 → 0.65.1

package/dist/components/DrawerForm.svelte

@@ -1,38 +1,122 @@
 <script lang="ts">
-  import { getResource } from '@svadmin/core';
-  import { useTranslation } from '@svadmin/core/i18n';
-
+  import type { Snippet } from 'svelte';
   import * as Sheet from './ui/sheet/index.js';
-  import AutoForm from './AutoForm.svelte';
-
-  const i18n = useTranslation();
+  import { Button } from './ui/button/index.js';
+  import { Loader2 } from '@lucide/svelte';
+  import { cn } from '../utils.js';
 
-  let { resourceName, mode = 'create', id, open = $bindable(false), side = 'right', onSuccess } = $props<{
-    resourceName: string;
-    mode?: 'create' | 'edit';
-    id?: string | number;
-    open: boolean;
+  interface Props {
+    open?: boolean;
+    title: string;
+    description?: string;
+    triggerText?: string;
+    triggerVariant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive';
+    triggerSize?: 'default' | 'sm' | 'lg' | 'icon';
+    submitText?: string;
+    cancelText?: string;
     side?: 'left' | 'right';
-    onSuccess?: () => void;
-  }>();
+    widthClass?: string;
+    isSubmitting?: boolean;
+    disabled?: boolean;
+    onsubmit?: () => void | Promise<void>;
+    oncancel?: () => void;
+    class?: string;
+    triggerSnippet?: Snippet;
+    children?: Snippet;
+  }
 
-  const resource = $derived(getResource(resourceName));
+  let {
+    open = $bindable(false),
+    title,
+    description,
+    triggerText = 'Open Drawer',
+    triggerVariant = 'default',
+    triggerSize = 'sm',
+    submitText = 'Save',
+    cancelText = 'Cancel',
+    side = 'right',
+    widthClass = 'sm:max-w-md w-full',
+    isSubmitting = false,
+    disabled = false,
+    onsubmit,
+    oncancel,
+    class: className = '',
+    triggerSnippet,
+    children,
+  }: Props = $props();
 
-  function handleSuccess() {
+  let loading = $state(false);
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    loading = true;
+    try {
+      await onsubmit?.();
+      open = false;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleCancel() {
+    oncancel?.();
     open = false;
-    onSuccess?.();
   }
 </script>
 
-<Sheet.Root bind:open {side}>
-  <Sheet.Content>
-    <Sheet.Header>
-      <Sheet.Title>
-        {mode === 'create' ? `${i18n.t('common.create')}${resource.label}` : `${i18n.t('common.edit')}${resource.label}`}
-      </Sheet.Title>
-    </Sheet.Header>
-    <div class="flex-1 overflow-y-auto">
-      <AutoForm {resourceName} {mode} {id} showHeader={false} onSuccess={handleSuccess} />
-    </div>
+{#if triggerSnippet}
+  <button
+    type="button"
+    class="inline-flex cursor-pointer bg-transparent border-0 p-0 text-left"
+    onclick={() => { open = true; }}
+    {disabled}
+  >
+    {@render triggerSnippet()}
+  </button>
+{:else if triggerText}
+  <Button variant={triggerVariant} size={triggerSize} {disabled} onclick={() => { open = true; }}>
+    {triggerText}
+  </Button>
+{/if}
+
+<Sheet.Root bind:open {side} onClose={handleCancel} class={cn(widthClass, 'p-0 overflow-hidden', className)}>
+  <Sheet.Content class="flex flex-col h-full gap-0 p-0">
+    <form onsubmit={handleSubmit} class="flex flex-col h-full">
+      <Sheet.Header class="px-6 py-4 border-b border-border/60">
+        <Sheet.Title>{title}</Sheet.Title>
+        {#if description}
+          <Sheet.Description>{description}</Sheet.Description>
+        {/if}
+      </Sheet.Header>
+
+      <div class="flex-1 overflow-y-auto p-6 text-sm text-foreground space-y-4">
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+
+      <Sheet.Footer class="gap-2 px-6 py-4 border-t border-border/60 mt-auto">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={loading || isSubmitting}
+          onclick={handleCancel}
+        >
+          {cancelText}
+        </Button>
+        <Button
+          type="submit"
+          size="sm"
+          disabled={loading || isSubmitting || disabled}
+          class="gap-1.5 min-w-20"
+        >
+          {#if loading || isSubmitting}
+            <Loader2 class="h-4 w-4 animate-spin" />
+          {/if}
+          {submitText}
+        </Button>
+      </Sheet.Footer>
+    </form>
   </Sheet.Content>
 </Sheet.Root>

package/dist/components/DrawerForm.svelte.d.ts

@@ -1,11 +1,23 @@
-type $$ComponentProps = {
-    resourceName: string;
-    mode?: 'create' | 'edit';
-    id?: string | number;
-    open: boolean;
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    title: string;
+    description?: string;
+    triggerText?: string;
+    triggerVariant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive';
+    triggerSize?: 'default' | 'sm' | 'lg' | 'icon';
+    submitText?: string;
+    cancelText?: string;
     side?: 'left' | 'right';
-    onSuccess?: () => void;
-};
-declare const DrawerForm: import("svelte").Component<$$ComponentProps, {}, "open">;
+    widthClass?: string;
+    isSubmitting?: boolean;
+    disabled?: boolean;
+    onsubmit?: () => void | Promise<void>;
+    oncancel?: () => void;
+    class?: string;
+    triggerSnippet?: Snippet;
+    children?: Snippet;
+}
+declare const DrawerForm: import("svelte").Component<Props, {}, "open">;
 type DrawerForm = ReturnType<typeof DrawerForm>;
 export default DrawerForm;

package/dist/components/EditableTable.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { Plus, Trash2, Save, Loader2 } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface EditableTableColumn {
+    key: string;
+    label: string;
+    type?: 'text' | 'number' | 'select' | 'boolean' | 'date';
+    options?: Array<{ label: string; value: string | number }>;
+    required?: boolean;
+    width?: string;
+    readonly?: boolean;
+  }
+
+  interface Props {
+    columns: EditableTableColumn[];
+    data?: Record<string, unknown>[];
+    rowKey?: string;
+    allowAdd?: boolean;
+    allowDelete?: boolean;
+    onchange?: (data: Record<string, unknown>[]) => void;
+    onsave?: (data: Record<string, unknown>[]) => void | Promise<void>;
+    class?: string;
+  }
+
+  let {
+    columns,
+    data = $bindable([]),
+    rowKey = 'id',
+    allowAdd = true,
+    allowDelete = true,
+    onchange,
+    onsave,
+    class: className = '',
+  }: Props = $props();
+
+  let isSaving = $state(false);
+
+  function updateCell(rowIndex: number, columnKey: string, value: unknown) {
+    const nextData = [...data];
+    nextData[rowIndex] = {
+      ...nextData[rowIndex],
+      [columnKey]: value,
+    };
+    data = nextData;
+    onchange?.(data);
+  }
+
+  function handleAddRow() {
+    const newRow: Record<string, unknown> = {
+      [rowKey]: `row_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+    };
+    for (const col of columns) {
+      if (col.type === 'number') newRow[col.key] = 0;
+      else if (col.type === 'boolean') newRow[col.key] = false;
+      else newRow[col.key] = '';
+    }
+    data = [...data, newRow];
+    onchange?.(data);
+  }
+
+  function handleDeleteRow(index: number) {
+    data = data.filter((_, idx) => idx !== index);
+    onchange?.(data);
+  }
+
+  async function handleSave() {
+    isSaving = true;
+    try {
+      await onsave?.(data);
+    } finally {
+      isSaving = false;
+    }
+  }
+</script>
+
+<div class={cn('space-y-3 rounded-xl border border-border bg-card p-4 shadow-xs text-xs', className)}>
+  <div class="flex items-center justify-between gap-2 pb-2 border-b border-border/60">
+    <div class="font-semibold text-foreground">
+      Editable Grid <span class="text-muted-foreground font-normal">({data.length} records)</span>
+    </div>
+
+    <div class="flex items-center gap-2">
+      {#if allowAdd}
+        <Button variant="outline" size="sm" class="h-8 text-xs gap-1" onclick={handleAddRow}>
+          <Plus class="h-3.5 w-3.5" />
+          Add Row
+        </Button>
+      {/if}
+      {#if onsave}
+        <Button size="sm" class="h-8 text-xs gap-1 min-w-20" disabled={isSaving} onclick={handleSave}>
+          {#if isSaving}
+            <Loader2 class="h-3.5 w-3.5 animate-spin" />
+          {:else}
+            <Save class="h-3.5 w-3.5" />
+          {/if}
+          Save All
+        </Button>
+      {/if}
+    </div>
+  </div>
+
+  <div class="overflow-x-auto rounded-lg border border-border/60">
+    <table class="w-full text-left border-collapse">
+      <thead class="bg-muted/40 font-semibold text-muted-foreground border-b border-border/60">
+        <tr>
+          {#each columns as col (col.key)}
+            <th style={col.width ? `width: ${col.width};` : ''} class="px-3 py-2.5">
+              {col.label}
+              {#if col.required}<span class="text-destructive">*</span>{/if}
+            </th>
+          {/each}
+          {#if allowDelete}
+            <th class="w-12 px-3 py-2.5 text-center">Action</th>
+          {/if}
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/40">
+        {#each data as row, rowIndex (row[rowKey] ?? rowIndex)}
+          <tr class="hover:bg-muted/20 transition-colors">
+            {#each columns as col (col.key)}
+              <td class="p-1.5">
+                {#if col.readonly}
+                  <div class="px-2 py-1 text-muted-foreground font-mono truncate">{row[col.key] ?? '—'}</div>
+                {:else if col.type === 'select' && col.options}
+                  <select
+                    class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={String(row[col.key] ?? '')}
+                    onchange={(e) => updateCell(rowIndex, col.key, e.currentTarget.value)}
+                  >
+                    {#each col.options as opt (opt.value)}
+                      <option value={String(opt.value)}>{opt.label}</option>
+                    {/each}
+                  </select>
+                {:else if col.type === 'boolean'}
+                  <div class="flex items-center justify-center py-1">
+                    <input
+                      type="checkbox"
+                      class="h-4 w-4 rounded border-border text-primary focus:ring-primary/20 cursor-pointer"
+                      checked={Boolean(row[col.key])}
+                      onchange={(e) => updateCell(rowIndex, col.key, e.currentTarget.checked)}
+                    />
+                  </div>
+                {:else if col.type === 'number'}
+                  <input
+                    type="number"
+                    class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={Number(row[col.key] ?? 0)}
+                    oninput={(e) => updateCell(rowIndex, col.key, Number(e.currentTarget.value))}
+                  />
+                {:else if col.type === 'date'}
+                  <input
+                    type="date"
+                    class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={String(row[col.key] ?? '')}
+                    oninput={(e) => updateCell(rowIndex, col.key, e.currentTarget.value)}
+                  />
+                {:else}
+                  <input
+                    type="text"
+                    class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={String(row[col.key] ?? '')}
+                    oninput={(e) => updateCell(rowIndex, col.key, e.currentTarget.value)}
+                  />
+                {/if}
+              </td>
+            {/each}
+
+            {#if allowDelete}
+              <td class="p-1.5 text-center">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="h-7 w-7 p-0 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                  onclick={() => handleDeleteRow(rowIndex)}
+                >
+                  <Trash2 class="h-3.5 w-3.5" />
+                </Button>
+              </td>
+            {/if}
+          </tr>
+        {/each}
+
+        {#if data.length === 0}
+          <tr>
+            <td colspan={columns.length + (allowDelete ? 1 : 0)} class="py-8 text-center text-muted-foreground">
+              No rows. Click "Add Row" to create the first record.
+            </td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+  </div>
+</div>

package/dist/components/EditableTable.svelte.d.ts

@@ -0,0 +1,25 @@
+export interface EditableTableColumn {
+    key: string;
+    label: string;
+    type?: 'text' | 'number' | 'select' | 'boolean' | 'date';
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    required?: boolean;
+    width?: string;
+    readonly?: boolean;
+}
+interface Props {
+    columns: EditableTableColumn[];
+    data?: Record<string, unknown>[];
+    rowKey?: string;
+    allowAdd?: boolean;
+    allowDelete?: boolean;
+    onchange?: (data: Record<string, unknown>[]) => void;
+    onsave?: (data: Record<string, unknown>[]) => void | Promise<void>;
+    class?: string;
+}
+declare const EditableTable: import("svelte").Component<Props, {}, "data">;
+type EditableTable = ReturnType<typeof EditableTable>;
+export default EditableTable;

package/dist/components/GanttChart.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { Badge } from './ui/badge/index.js';
+  import { cn } from '../utils.js';
+
+  export interface GanttTask {
+    id: string;
+    title: string;
+    startDay: number; // 0-based offset
+    durationDays: number;
+    progress?: number; // 0 to 100
+    category?: string;
+    assignee?: string;
+    status?: 'planned' | 'in_progress' | 'completed' | 'delayed';
+  }
+
+  interface Props {
+    tasks: GanttTask[];
+    totalDays?: number;
+    dayLabelPrefix?: string;
+    onselecttask?: (task: GanttTask) => void;
+    class?: string;
+  }
+
+  let {
+    tasks = [],
+    totalDays = 14,
+    dayLabelPrefix = 'D',
+    onselecttask,
+    class: className = '',
+  }: Props = $props();
+
+  const days = $derived(
+    Array.from({ length: totalDays }, (_, i) => `${dayLabelPrefix}${i + 1}`)
+  );
+
+  function getStatusBadgeVariant(status?: string) {
+    switch (status) {
+      case 'completed':
+        return 'bg-success/15 text-success border-success/30';
+      case 'delayed':
+        return 'bg-destructive/15 text-destructive border-destructive/30';
+      case 'in_progress':
+        return 'bg-primary/15 text-primary border-primary/30';
+      default:
+        return 'bg-muted text-muted-foreground border-border/40';
+    }
+  }
+
+  function getBarColor(status?: string) {
+    switch (status) {
+      case 'completed':
+        return 'bg-success text-success-foreground';
+      case 'delayed':
+        return 'bg-destructive text-destructive-foreground';
+      default:
+        return 'bg-primary text-primary-foreground';
+    }
+  }
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card p-4 shadow-xs text-xs space-y-3', className)}>
+  <div class="flex items-center justify-between pb-2 border-b border-border/60">
+    <div class="font-semibold text-foreground">
+      Project Gantt Schedule <span class="text-muted-foreground font-normal">({tasks.length} tasks / {totalDays} days)</span>
+    </div>
+  </div>
+
+  <div class="overflow-x-auto rounded-lg border border-border/60">
+    <div class="min-w-[700px]">
+      <!-- Timeline Header -->
+      <div class="flex border-b border-border/60 bg-muted/40 font-semibold text-muted-foreground">
+        <div class="w-56 p-2.5 border-r border-border/60 text-left shrink-0">Task Name</div>
+        <div class="flex-1 flex">
+          {#each days as day (day)}
+            <div class="flex-1 p-2 text-center border-r border-border/40 text-[11px] font-mono last:border-r-0">
+              {day}
+            </div>
+          {/each}
+        </div>
+      </div>
+
+      <!-- Task Rows -->
+      <div class="divide-y divide-border/40">
+        {#each tasks as task (task.id)}
+          {@const leftPct = (task.startDay / totalDays) * 100}
+          {@const widthPct = (task.durationDays / totalDays) * 100}
+          <div
+            role="button"
+            tabindex="0"
+            class="flex items-center hover:bg-muted/20 transition-colors cursor-pointer"
+            onclick={() => onselecttask?.(task)}
+            onkeydown={(e) => { if (e.key === 'Enter') onselecttask?.(task); }}
+          >
+            <!-- Task Info Column -->
+            <div class="w-56 p-2.5 border-r border-border/60 flex items-center justify-between gap-2 shrink-0">
+              <div class="truncate font-medium text-foreground">{task.title}</div>
+              {#if task.status}
+                <Badge variant="outline" class={cn('text-[9px] px-1 py-0 uppercase', getStatusBadgeVariant(task.status))}>
+                  {task.status}
+                </Badge>
+              {/if}
+            </div>
+
+            <!-- Task Bar Grid Area -->
+            <div class="flex-1 relative h-10 flex items-center px-1">
+              <!-- Grid vertical guideline background -->
+              <div class="absolute inset-0 flex pointer-events-none">
+                {#each days as _, idx (idx)}
+                  <div class="flex-1 border-r border-border/20 last:border-r-0"></div>
+                {/each}
+              </div>
+
+              <!-- Bar element -->
+              <div
+                class={cn(
+                  'relative h-6 rounded-md shadow-xs flex items-center justify-between px-2 text-[10px] font-medium overflow-hidden transition-all group hover:brightness-110',
+                  getBarColor(task.status)
+                )}
+                style={`margin-left: ${leftPct}%; width: ${Math.max(widthPct, 4)}%;`}
+              >
+                <!-- Inner progress fill -->
+                {#if task.progress !== undefined}
+                  <div
+                    class="absolute inset-y-0 left-0 bg-foreground/20 pointer-events-none"
+                    style={`width: ${task.progress}%;`}
+                  ></div>
+                {/if}
+
+                <span class="truncate relative z-10">{task.title}</span>
+                {#if task.progress !== undefined}
+                  <span class="relative z-10 text-[9px] opacity-90 font-mono">{task.progress}%</span>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/each}
+
+        {#if tasks.length === 0}
+          <div class="py-8 text-center text-muted-foreground">No schedule tasks available</div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/GanttChart.svelte.d.ts

@@ -0,0 +1,20 @@
+export interface GanttTask {
+    id: string;
+    title: string;
+    startDay: number;
+    durationDays: number;
+    progress?: number;
+    category?: string;
+    assignee?: string;
+    status?: 'planned' | 'in_progress' | 'completed' | 'delayed';
+}
+interface Props {
+    tasks: GanttTask[];
+    totalDays?: number;
+    dayLabelPrefix?: string;
+    onselecttask?: (task: GanttTask) => void;
+    class?: string;
+}
+declare const GanttChart: import("svelte").Component<Props, {}, "">;
+type GanttChart = ReturnType<typeof GanttChart>;
+export default GanttChart;

package/dist/components/ImageCropper.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { RotateCw, ZoomIn, ZoomOut, Crop } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    imageUrl: string;
+    aspectRatio?: number;
+    zoom?: number;
+    rotation?: number;
+    oncrop?: (croppedDataUrl: string) => void;
+    oncancel?: () => void;
+    class?: string;
+  }
+
+  let {
+    imageUrl,
+    aspectRatio = 1,
+    zoom = $bindable(1),
+    rotation = $bindable(0),
+    oncrop,
+    oncancel,
+    class: className = '',
+  }: Props = $props();
+
+  let canvasEl = $state<HTMLCanvasElement | null>(null);
+
+  function handleRotate() {
+    rotation = (rotation + 90) % 360;
+  }
+
+  function handleCrop() {
+    if (!canvasEl) return;
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      const ctx = canvasEl?.getContext('2d');
+      if (!ctx || !canvasEl) return;
+
+      const size = 300;
+      canvasEl.width = size;
+      canvasEl.height = size / aspectRatio;
+
+      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+      ctx.save();
+      ctx.translate(canvasEl.width / 2, canvasEl.height / 2);
+      ctx.rotate((rotation * Math.PI) / 180);
+      ctx.scale(zoom, zoom);
+      ctx.drawImage(img, -size / 2, (-size / 2) / aspectRatio, size, size / aspectRatio);
+      ctx.restore();
+
+      const dataUrl = canvasEl.toDataURL('image/png');
+      oncrop?.(dataUrl);
+    };
+    img.src = imageUrl;
+  }
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card p-4 shadow-xs space-y-4 text-xs', className)}>
+  <div class="flex items-center justify-between pb-2 border-b border-border/60">
+    <h4 class="font-semibold text-foreground flex items-center gap-1.5">
+      <Crop class="h-4 w-4 text-primary" />
+      Image Cropper
+    </h4>
+  </div>
+
+  <!-- Crop Viewport -->
+  <div class="relative flex items-center justify-center h-64 w-full rounded-lg bg-muted/40 border border-border/60 overflow-hidden select-none">
+    <div
+      style="transform: scale({zoom}) rotate({rotation}deg); transition: transform 150ms ease;"
+      class="max-h-56 max-w-56 flex items-center justify-center"
+    >
+      <img src={imageUrl} alt="Crop Preview" class="object-contain max-h-56 max-w-56 rounded pointer-events-none" />
+    </div>
+
+    <!-- Aspect Ratio Overlay Grid -->
+    <div
+      style="aspect-ratio: {aspectRatio};"
+      class="absolute w-48 border-2 border-primary/80 rounded pointer-events-none shadow-[0_0_0_9999px_rgba(0,0,0,0.45)]"
+    ></div>
+  </div>
+
+  <!-- Controls Bar -->
+  <div class="flex items-center justify-between gap-3 pt-2">
+    <div class="flex items-center gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        class="h-7 text-xs gap-1"
+        onclick={() => { zoom = Math.max(0.5, Number((zoom - 0.1).toFixed(1))); }}
+      >
+        <ZoomOut class="h-3 w-3" />
+      </Button>
+      <span class="tabular-nums font-mono text-[11px] text-muted-foreground w-10 text-center">{Math.round(zoom * 100)}%</span>
+      <Button
+        variant="outline"
+        size="sm"
+        class="h-7 text-xs gap-1"
+        onclick={() => { zoom = Math.min(3, Number((zoom + 0.1).toFixed(1))); }}
+      >
+        <ZoomIn class="h-3 w-3" />
+      </Button>
+
+      <Button variant="outline" size="sm" class="h-7 text-xs gap-1 ml-2" onclick={handleRotate}>
+        <RotateCw class="h-3 w-3" />
+        Rotate
+      </Button>
+    </div>
+
+    <div class="flex items-center gap-2">
+      {#if oncancel}
+        <Button variant="outline" size="sm" class="h-7 text-xs" onclick={oncancel}>Cancel</Button>
+      {/if}
+      <Button size="sm" class="h-7 text-xs gap-1" onclick={handleCrop}>
+        Apply Crop
+      </Button>
+    </div>
+  </div>
+
+  <!-- Hidden Working Canvas -->
+  <canvas bind:this={canvasEl} class="hidden"></canvas>
+</div>