includio-cms 0.1.4 → 0.5.0

package/dist/admin/client/form/form-submissions.svelte

@@ -5,22 +5,34 @@
 	import SubmissionLink from './submission-link.svelte';
 	import SubmissionStatusBadge from './submission-status-badge.svelte';
 	import DataTable from '../collection/data-table.svelte';
-	import TableToolbar from '../collection/table-toolbar.svelte';
 	import TablePagination from '../collection/table-pagination.svelte';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	import { formatRelativeDate as formatRelativeDateUtil, formatAbsoluteDate as formatAbsoluteDateUtil } from '../../utils/formatDate.js';
-	import type { DateFormat } from '../collection/collection-view.svelte.js';
+	import { formatAbsoluteDate as formatAbsoluteDateUtil } from '../../utils/formatDate.js';
 	import Checkbox from '../../../components/ui/checkbox/checkbox.svelte';
 	import { getRemotes } from '../../context/remotes.js';
+	import { invalidateAll } from '$app/navigation';
+	import Search from '@tabler/icons-svelte/icons/search';
+	import FilterIcon from '@tabler/icons-svelte/icons/filter';
 	import Download from '@tabler/icons-svelte/icons/download';
+	import ChevronDown from '@tabler/icons-svelte/icons/chevron-down';
+	import FileSpreadsheet from '@tabler/icons-svelte/icons/file-spreadsheet';
+	import FileText from '@tabler/icons-svelte/icons/file-text';
+	import Trash from '@tabler/icons-svelte/icons/trash';
+	import Eye from '@tabler/icons-svelte/icons/eye';
+	import EyeOff from '@tabler/icons-svelte/icons/eye-off';
+	import X from '@tabler/icons-svelte/icons/x';
+	import ClipboardList from '@tabler/icons-svelte/icons/clipboard-list';
+	import Input from '../../../components/ui/input/input.svelte';
 	import Button from '../../../components/ui/button/button.svelte';
-	import { invalidateAll } from '$app/navigation';
+	import * as Popover from '../../../components/ui/popover/index.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 
+	type ReadFilter = 'all' | 'unread' | 'read';
+
 	const lang: Record<
 		InterfaceLanguage,
 		{
@@ -28,34 +40,85 @@
 			status: string;
 			new: string;
 			read: string;
-			total: string;
-			newCount: string;
-			lastSubmission: string;
+			submissions: string;
+			unread: string;
+			unreadCount: string;
+			searchPlaceholder: string;
+			all: string;
+			filterAll: string;
+			filterUnread: string;
+			filterRead: string;
 			export: string;
+			exportCsv: string;
+			exportJson: string;
 			noSubmissions: string;
+			noSubmissionsDesc: string;
+			noResults: string;
+			noResultsDesc: string;
+			bulkSelected: (n: number) => string;
+			bulkMarkRead: string;
+			bulkMarkUnread: string;
+			bulkExport: string;
+			bulkDelete: string;
+			confirmBulkDelete: (n: number) => string;
+			itemLabel: string;
 		}
 	> = {
 		pl: {
-			createdAt: 'Data utworzenia',
+			createdAt: 'Wysłano',
 			status: 'Status',
 			new: 'Nowe',
 			read: 'Przeczytane',
-			total: 'Ogółem',
-			newCount: 'Nowych',
-			lastSubmission: 'Ostatnie',
-			export: 'Eksportuj CSV',
-			noSubmissions: 'Brak zgłoszeń'
+			submissions: 'zgłoszeń',
+			unread: 'nieprzeczytanych',
+			unreadCount: 'nieprzeczytanych',
+			searchPlaceholder: 'Szukaj zgłoszeń…',
+			all: 'Wszystkie',
+			filterAll: 'Wszystkie',
+			filterUnread: 'Nieprzeczytane',
+			filterRead: 'Przeczytane',
+			export: 'Eksportuj',
+			exportCsv: 'Eksportuj CSV',
+			exportJson: 'Eksportuj JSON',
+			noSubmissions: 'Brak zgłoszeń',
+			noSubmissionsDesc: 'Nie otrzymano jeszcze żadnych zgłoszeń z tego formularza.',
+			noResults: 'Brak wyników',
+			noResultsDesc: 'Spróbuj zmienić kryteria wyszukiwania.',
+			bulkSelected: (n) => `${n} zaznaczonych`,
+			bulkMarkRead: 'Oznacz przeczytane',
+			bulkMarkUnread: 'Oznacz nieprzeczytane',
+			bulkExport: 'Eksportuj',
+			bulkDelete: 'Usuń',
+			confirmBulkDelete: (n) => `Czy na pewno chcesz usunąć ${n} zgłoszeń?`,
+			itemLabel: 'zgłoszeń'
 		},
 		en: {
-			createdAt: 'Created At',
+			createdAt: 'Sent',
 			status: 'Status',
 			new: 'New',
 			read: 'Read',
-			total: 'Total',
-			newCount: 'New',
-			lastSubmission: 'Last',
-			export: 'Export CSV',
-			noSubmissions: 'No submissions'
+			submissions: 'submissions',
+			unread: 'unread',
+			unreadCount: 'unread',
+			searchPlaceholder: 'Search submissions…',
+			all: 'All',
+			filterAll: 'All',
+			filterUnread: 'Unread',
+			filterRead: 'Read',
+			export: 'Export',
+			exportCsv: 'Export CSV',
+			exportJson: 'Export JSON',
+			noSubmissions: 'No submissions',
+			noSubmissionsDesc: 'No submissions have been received from this form yet.',
+			noResults: 'No results',
+			noResultsDesc: 'Try adjusting your search criteria.',
+			bulkSelected: (n) => `${n} selected`,
+			bulkMarkRead: 'Mark read',
+			bulkMarkUnread: 'Mark unread',
+			bulkExport: 'Export',
+			bulkDelete: 'Delete',
+			confirmBulkDelete: (n) => `Are you sure you want to delete ${n} submissions?`,
+			itemLabel: 'submissions'
 		}
 	};
 
@@ -72,19 +135,27 @@
 	let { submissions, formConfig }: Props = $props();
 
 	let searchQuery = $state('');
-	let dateFormat = $state<DateFormat>('relative');
+	let readFilter = $state<ReadFilter>('all');
 	let rowSelection = $state<RowSelectionState>({});
 	let sorting = $state<SortingState>([{ id: 'createdAt', desc: true }]);
 	let pageSize = $state(20);
 	let tableInstance = $state<Table<SubmissionRow> | null>(null);
+	let exportDropdownOpen = $state(false);
+	let filterPopoverOpen = $state(false);
+
+	const t = $derived(lang[interfaceLanguage.current]);
+	const formLabel = $derived(
+		getLocalizedLabel(formConfig.label, interfaceLanguage.current) || formConfig.slug
+	);
 
 	const stats = $derived({
 		total: submissions.length,
-		newCount: submissions.filter((s) => !s.read).length,
-		last: submissions.length > 0 ? new Date(submissions[0].createdAt) : null
+		unreadCount: submissions.filter((s) => !s.read).length
 	});
 
-	const selectedCount = $derived(Object.keys(rowSelection).filter((k) => rowSelection[k]).length);
+	const selectedCount = $derived(
+		Object.keys(rowSelection).filter((k) => rowSelection[k]).length
+	);
 	const selectedIds = $derived(
 		Object.keys(rowSelection)
 			.filter((key) => rowSelection[key])
@@ -102,6 +173,12 @@
 			url: `/admin/form-submissions/${submission.id}`
 		}));
 
+		if (readFilter === 'unread') {
+			result = result.filter((item) => !item.read);
+		} else if (readFilter === 'read') {
+			result = result.filter((item) => item.read);
+		}
+
 		if (searchQuery) {
 			const query = searchQuery.toLowerCase();
 			result = result.filter((item) => {
@@ -117,17 +194,21 @@
 	const totalItems = $derived(filteredData.length);
 	const pageCount = $derived(Math.ceil(totalItems / pageSize));
 
+	const activeFilterLabel = $derived(
+		readFilter === 'all' ? t.filterAll : readFilter === 'unread' ? t.filterUnread : t.filterRead
+	);
+
 	const columns = $derived.by(() => {
-		// Track dateFormat as dependency
-		const currentDateFormat = dateFormat;
 		const cols: ColumnDef<SubmissionRow>[] = [];
 
+		// Checkbox column
 		cols.push({
 			id: 'select',
 			header: ({ table }) =>
 				renderComponent(Checkbox, {
 					checked: table.getIsAllPageRowsSelected(),
-					indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
+					indeterminate:
+						table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
 					onCheckedChange: (value: boolean) => table.toggleAllPageRowsSelected(!!value)
 				}),
 			cell: ({ row }) =>
@@ -139,152 +220,353 @@
 			enableHiding: false
 		});
 
-		formConfig.fields.forEach((field, index) => {
-			if (field.showInDataTable) {
-				let col: ColumnDef<SubmissionRow> = {
-					accessorKey: field.slug,
-					header: getLocalizedLabel(field.label, interfaceLanguage.current) || field.slug
-				};
-
-				if (index === 0) {
-					col = {
-						...col,
-						cell: (info) => {
-							return renderComponent(SubmissionLink, {
-								name: String(info.row.original[field.slug] ?? ''),
-								url: info.row.original.url,
-								isRead: info.row.original.read
-							});
-						}
-					};
-				}
-
-				cols.push(col);
-			}
-		});
-
+		// Read dot column
 		cols.push({
-			accessorKey: 'read',
-			header: lang[interfaceLanguage.current].status,
+			id: 'readDot',
+			header: '',
 			cell: (info) => {
 				return renderComponent(SubmissionStatusBadge, {
-					isRead: info.row.original.read
+					isRead: info.row.original.read,
+					variant: 'dot'
 				});
+			},
+			enableSorting: false,
+			enableHiding: false,
+			size: 32
+		});
+
+		// Dynamic field columns
+		const firstShowField = formConfig.fields.find((f) => f.showInDataTable);
+		formConfig.fields.forEach((field) => {
+			if (!field.showInDataTable) return;
+
+			let col: ColumnDef<SubmissionRow> = {
+				accessorKey: field.slug,
+				header: getLocalizedLabel(field.label, interfaceLanguage.current) || field.slug
+			};
+
+			if (field === firstShowField) {
+				col = {
+					...col,
+					cell: (info) => {
+						return renderComponent(SubmissionLink, {
+							name: String(info.row.original[field.slug] ?? ''),
+							url: info.row.original.url,
+							isRead: info.row.original.read
+						});
+					}
+				};
 			}
+
+			if (field.type === 'email') {
+				col = {
+					...col,
+					cell: (info) => {
+						const val = info.row.original[field.slug];
+						return val ? String(val) : '-';
+					}
+				};
+			}
+
+			cols.push(col);
 		});
 
+		// Message preview column (find textarea field not in showInDataTable)
+		const messageField = formConfig.fields.find(
+			(f) => f.type === 'textarea' && !f.showInDataTable
+		);
+		if (messageField) {
+			cols.push({
+				id: 'messagePreview',
+				accessorKey: messageField.slug,
+				header:
+					getLocalizedLabel(messageField.label, interfaceLanguage.current) ||
+					messageField.slug,
+				cell: (info) => {
+					const val = info.row.original[messageField.slug];
+					if (!val) return '-';
+					const text = String(val);
+					return text.length > 60 ? text.slice(0, 60) + '…' : text;
+				},
+				size: 280
+			});
+		}
+
+		// Date column
 		cols.push({
 			accessorKey: 'createdAt',
-			header: lang[interfaceLanguage.current].createdAt,
+			header: t.createdAt,
 			cell: (info) => {
 				const date = new Date(info.row.original.createdAt);
-				if (currentDateFormat === 'relative') {
-					return formatRelativeDate(date);
-				}
-				return formatAbsoluteDate(date);
+				return formatAbsoluteDateUtil(date, interfaceLanguage.current);
 			}
 		});
 
 		return cols;
 	});
 
-	function formatRelativeDate(date: Date): string {
-		return formatRelativeDateUtil(date, interfaceLanguage.current);
+	async function handleExportCsv() {
+		const csv = await remotes.exportFormSubmissions(formConfig.slug);
+		const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement('a');
+		link.href = url;
+		link.download = `${formConfig.slug}-submissions-${new Date().toISOString().split('T')[0]}.csv`;
+		link.click();
+		URL.revokeObjectURL(url);
+		exportDropdownOpen = false;
 	}
 
-	function formatAbsoluteDate(date: Date): string {
-		return formatAbsoluteDateUtil(date, interfaceLanguage.current);
+	async function handleExportJson() {
+		const blob = new Blob([JSON.stringify(submissions, null, 2)], {
+			type: 'application/json'
+		});
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement('a');
+		link.href = url;
+		link.download = `${formConfig.slug}-submissions-${new Date().toISOString().split('T')[0]}.json`;
+		link.click();
+		URL.revokeObjectURL(url);
+		exportDropdownOpen = false;
+	}
+
+	async function handleBulkMarkRead() {
+		for (const id of selectedIds) {
+			await remotes.updateFormSubmission({ id, read: true });
+		}
+		rowSelection = {};
+		invalidateAll();
+	}
+
+	async function handleBulkMarkUnread() {
+		for (const id of selectedIds) {
+			await remotes.updateFormSubmission({ id, read: false });
+		}
+		rowSelection = {};
+		invalidateAll();
 	}
 
 	async function handleBulkDelete() {
 		if (selectedIds.length === 0) return;
-		const confirmMsg =
-			interfaceLanguage.current === 'pl'
-				? `Czy na pewno chcesz usunąć ${selectedIds.length} zgłoszeń?`
-				: `Are you sure you want to delete ${selectedIds.length} submissions?`;
-		if (!confirm(confirmMsg)) return;
-
+		if (!confirm(t.confirmBulkDelete(selectedIds.length))) return;
 		await remotes.deleteFormSubmissions(selectedIds);
 		rowSelection = {};
 		invalidateAll();
 	}
 
-	async function handleExport() {
-		const csv = await remotes.exportFormSubmissions(formConfig.slug);
-		const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement('a');
-		link.href = url;
-		link.download = `${formConfig.slug}-submissions-${new Date().toISOString().split('T')[0]}.csv`;
-		link.click();
-		URL.revokeObjectURL(url);
-	}
 </script>
 
-<div class="space-y-4">
-	<div
-		class="flex flex-wrap items-center gap-4 rounded-lg border bg-slate-50 p-4 dark:bg-slate-800/50"
-	>
-		<div class="flex items-center gap-2">
-			<span class="text-muted-foreground text-sm">{lang[interfaceLanguage.current].total}:</span>
-			<span class="font-semibold">{stats.total}</span>
-		</div>
-		<div class="flex items-center gap-2">
-			<span class="text-muted-foreground text-sm">{lang[interfaceLanguage.current].newCount}:</span>
-			<span class="font-semibold text-blue-600">{stats.newCount}</span>
-		</div>
-		{#if stats.last}
-			<div class="flex items-center gap-2">
-				<span class="text-muted-foreground text-sm"
-					>{lang[interfaceLanguage.current].lastSubmission}:</span
+<div class="space-y-5">
+	<!-- Header -->
+	<div>
+		<div class="mb-1 flex flex-wrap items-center gap-3">
+			<h1 class="text-2xl font-bold">{formLabel}</h1>
+			<span
+				class="bg-lavender-lighter text-primary inline-flex h-6 items-center rounded-full px-2.5 text-xs font-bold"
+				aria-label="{stats.total} {t.submissions}"
+			>
+				{stats.total} {t.submissions}
+			</span>
+			{#if stats.unreadCount > 0}
+				<span
+					class="inline-flex h-6 items-center rounded-full bg-amber-50 px-2.5 text-xs font-semibold text-amber-600"
+					aria-label="{stats.unreadCount} {t.unreadCount}"
 				>
-				<span class="font-semibold">{formatRelativeDate(stats.last)}</span>
+					{stats.unreadCount} {t.unreadCount}
+				</span>
+			{/if}
+		</div>
+
+		<!-- Toolbar -->
+		<div class="mt-4 flex flex-wrap items-center gap-2.5">
+			<div class="relative min-w-[240px] flex-1">
+				<Search
+					class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
+				/>
+				<Input
+					type="search"
+					placeholder={t.searchPlaceholder}
+					class="border-border bg-white pl-9"
+					value={searchQuery}
+					oninput={(e) => (searchQuery = e.currentTarget.value)}
+					aria-label={t.searchPlaceholder}
+				/>
 			</div>
-		{/if}
-		<div class="ml-auto">
-			<Button variant="outline" size="sm" onclick={handleExport}>
-				<Download class="mr-2 size-4" />
-				{lang[interfaceLanguage.current].export}
-			</Button>
+
+			<Popover.Root bind:open={filterPopoverOpen}>
+				<Popover.Trigger>
+					{#snippet child({ props })}
+						<Button
+							{...props}
+							variant="outline"
+							size="sm"
+							class="gap-1.5 {readFilter !== 'all'
+								? 'border-primary/30 bg-lavender-lighter text-primary'
+								: ''}"
+						>
+							<FilterIcon class="size-3.5" />
+							{activeFilterLabel}
+						</Button>
+					{/snippet}
+				</Popover.Trigger>
+				<Popover.Content class="w-40 p-1" align="start">
+					{#each ['all', 'unread', 'read'] as filter}
+						<button
+							class="hover:bg-accent flex w-full items-center rounded-md px-2.5 py-1.5 text-sm transition-colors {readFilter ===
+							filter
+								? 'bg-accent text-accent-foreground font-medium'
+								: 'text-foreground'}"
+							onclick={() => {
+								readFilter = filter as ReadFilter;
+								filterPopoverOpen = false;
+							}}
+						>
+							{filter === 'all'
+								? t.filterAll
+								: filter === 'unread'
+									? t.filterUnread
+									: t.filterRead}
+						</button>
+					{/each}
+				</Popover.Content>
+			</Popover.Root>
+
+			<div class="flex-1"></div>
+
+			<!-- Export dropdown -->
+			<Popover.Root bind:open={exportDropdownOpen}>
+				<Popover.Trigger>
+					{#snippet child({ props })}
+						<Button {...props} variant="outline" size="sm" class="gap-1.5">
+							<Download class="size-3.5" />
+							{t.export}
+							<ChevronDown class="size-3" />
+						</Button>
+					{/snippet}
+				</Popover.Trigger>
+				<Popover.Content class="w-44 p-1" align="end">
+					<button
+						class="hover:bg-accent flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors"
+						onclick={handleExportCsv}
+					>
+						<FileSpreadsheet class="size-3.5" />
+						{t.exportCsv}
+					</button>
+					<button
+						class="hover:bg-accent flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors"
+						onclick={handleExportJson}
+					>
+						<FileText class="size-3.5" />
+						{t.exportJson}
+					</button>
+				</Popover.Content>
+			</Popover.Root>
 		</div>
 	</div>
 
-	<div class="rounded-2xl border bg-white dark:bg-slate-900">
-		<TableToolbar
-			{searchQuery}
-			onSearchChange={(q) => (searchQuery = q)}
-			{dateFormat}
-			onDateFormatChange={(f) => (dateFormat = f)}
-			{selectedCount}
-			onBulkDelete={handleBulkDelete}
-			showViewModeToggle={false}
-		/>
-
-		<DataTable
-			data={filteredData}
-			{columns}
-			enableSorting={true}
-			enableSelection={true}
-			enablePagination={true}
-			globalFilter={searchQuery}
-			{sorting}
-			onSortingChange={(s) => (sorting = s)}
-			{rowSelection}
-			onRowSelectionChange={(s) => (rowSelection = s)}
-			pagination={{ pageIndex: 0, pageSize }}
-			tableRef={(t) => (tableInstance = t)}
-		/>
-
-		<TablePagination
-			pageIndex={tableInstance?.getState().pagination.pageIndex ?? 0}
-			{pageSize}
-			{pageCount}
-			{totalItems}
-			onPageChange={(p) => tableInstance?.setPageIndex(p)}
-			onPageSizeChange={(s) => {
-				pageSize = s;
-				tableInstance?.setPageSize(s);
-			}}
-		/>
-	</div>
+	<!-- Table -->
+	{#if submissions.length === 0}
+		<!-- Empty state: no submissions at all -->
+		<div class="flex flex-col items-center justify-center rounded-2xl border bg-card px-10 py-20 text-center">
+			<div
+				class="bg-surface mb-5 flex size-[72px] items-center justify-center rounded-xl"
+			>
+				<ClipboardList class="text-muted-foreground size-8" />
+			</div>
+			<h2 class="mb-1.5 text-lg font-bold">{t.noSubmissions}</h2>
+			<p class="text-muted-foreground max-w-[360px] text-sm leading-relaxed">
+				{t.noSubmissionsDesc}
+			</p>
+		</div>
+	{:else}
+		<div class="overflow-hidden rounded-xl border bg-card shadow-sm">
+			<DataTable
+				data={filteredData}
+				{columns}
+				enableSorting={true}
+				enableSelection={true}
+				enablePagination={true}
+				globalFilter={searchQuery}
+				{sorting}
+				onSortingChange={(s) => (sorting = s)}
+				{rowSelection}
+				onRowSelectionChange={(s) => (rowSelection = s)}
+				pagination={{ pageIndex: 0, pageSize }}
+				tableRef={(t) => (tableInstance = t)}
+				emptyMessage={searchQuery || readFilter !== 'all'
+					? t.noResults
+					: t.noSubmissions}
+			/>
+
+			<TablePagination
+				pageIndex={tableInstance?.getState().pagination.pageIndex ?? 0}
+				{pageSize}
+				{pageCount}
+				{totalItems}
+				itemLabel={t.itemLabel}
+				onPageChange={(p) => tableInstance?.setPageIndex(p)}
+				onPageSizeChange={(s) => {
+					pageSize = s;
+					tableInstance?.setPageSize(s);
+				}}
+			/>
+		</div>
+	{/if}
 </div>
+
+<!-- Bulk actions bar -->
+{#if selectedCount > 0}
+	<div
+		class="fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-xl bg-[#2E2558] px-5 py-2.5 text-white shadow-xl"
+		role="toolbar"
+		aria-label="Bulk actions"
+	>
+		<span class="text-sm font-bold whitespace-nowrap">{t.bulkSelected(selectedCount)}</span>
+		<div class="h-5 w-px bg-white/20"></div>
+		<Button
+			variant="ghost"
+			size="sm"
+			class="gap-1.5 border border-white/20 text-white hover:bg-white/10 hover:text-white"
+			onclick={handleBulkMarkRead}
+		>
+			<Eye class="size-3.5" />
+			{t.bulkMarkRead}
+		</Button>
+		<Button
+			variant="ghost"
+			size="sm"
+			class="gap-1.5 border border-white/20 text-white hover:bg-white/10 hover:text-white"
+			onclick={handleBulkMarkUnread}
+		>
+			<EyeOff class="size-3.5" />
+			{t.bulkMarkUnread}
+		</Button>
+		<Button
+			variant="ghost"
+			size="sm"
+			class="gap-1.5 border border-white/20 text-white hover:bg-white/10 hover:text-white"
+			onclick={handleExportCsv}
+		>
+			<Download class="size-3.5" />
+			{t.bulkExport}
+		</Button>
+		<Button
+			variant="ghost"
+			size="sm"
+			class="gap-1.5 border border-red-400/50 text-white hover:bg-red-500/20 hover:text-white"
+			onclick={handleBulkDelete}
+		>
+			<Trash class="size-3.5" />
+			{t.bulkDelete}
+		</Button>
+		<Button
+			variant="ghost"
+			size="icon"
+			class="ml-1 size-7 text-white/60 hover:bg-white/10 hover:text-white"
+			onclick={() => (rowSelection = {})}
+		>
+			<X class="size-3.5" />
+		</Button>
+	</div>
+{/if}
+