@makolabs/ripple 0.0.1 → 0.0.3

package/dist/layout/table/Table.svelte

@@ -0,0 +1,790 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { table } from './table.js';
+	import type { TableProps, SortDirection, SortState } from '../../index.js';
+
+	let {
+		data = [],
+		columns = [],
+		bordered = true,
+		striped = false,
+		pageSize = 10,
+		currentPage: externalCurrentPage,
+		totalItems,
+		selectable = false,
+		selected = $bindable([]),
+		onrowclick,
+		onsort = () => {},
+		onselect = () => {},
+		onpagechange,
+		onpagesizechange,
+		class: classname = '',
+		wrapperclass: wrapperClass = '',
+		tableclass: tableClass = '',
+		theadclass: theadClass = '',
+		tbodyclass: tbodyClass = '',
+		trclass: trClass = 'bg-white',
+		thclass: thClass = '',
+		tdclass: tdClass = '',
+		footerclass: footerClass = '',
+		paginationclass: paginationClass = '',
+		rowclass = () => '',
+		loading = false,
+		expandedContent,
+		pagination = true,
+		showPagination = true,
+		showPageSize = false,
+		pageSizeOptions = [5, 10, 25, 50, 100],
+		paginationPosition = 'bottom',
+		paginationTemplate = 'full'
+	}: TableProps<any> = $props();
+
+	let sortColumn = $state('');
+	let sortDirection = $state<SortDirection>(null);
+	let internalCurrentPage = $state(externalCurrentPage || 1);
+	let internalPageSize = $state(pageSize);
+
+	// Use external current page if provided
+	$effect(() => {
+		if (externalCurrentPage !== undefined) {
+			internalCurrentPage = externalCurrentPage;
+		}
+	});
+
+	// Pagination is automatically determined by pageSize and pagination prop
+	const showPaginationControls = $derived(
+		pagination &&
+			showPagination &&
+			(data.length > internalPageSize || totalItems > internalPageSize)
+	);
+
+	// Calculate total items and pages
+	const effectiveTotalItems = $derived(totalItems !== undefined ? totalItems : data.length);
+	const totalPages = $derived(Math.ceil(effectiveTotalItems / internalPageSize));
+
+	const {
+		base: baseClass,
+		wrapper: wrapperBaseClass,
+		table: tableBaseClass,
+		thead: theadBaseClass,
+		tbody: tbodyBaseClass,
+		tr: trBaseClass,
+		th: thBaseClass,
+		td: tdBaseClass,
+		footer: footerBaseClass,
+		pagination: paginationBaseClass,
+		emptyState: emptyStateBaseClass,
+		sortButton: sortButtonBaseClass,
+		sortIcon: sortIconBaseClass
+	} = $derived(
+		table({
+			bordered,
+			striped
+		})
+	);
+
+	const baseClasses = $derived(cn(baseClass(), classname));
+	const wrapperClasses = $derived(cn(wrapperBaseClass(), wrapperClass));
+	const tableClasses = $derived(cn(tableBaseClass(), tableClass));
+	const theadClasses = $derived(cn(theadBaseClass(), theadClass));
+	const tbodyClasses = $derived(cn(tbodyBaseClass(), tbodyClass));
+	const trClasses = $derived(cn(trBaseClass(), trClass));
+	const thClasses = $derived(cn(thBaseClass(), thClass));
+	const tdClasses = $derived(cn(tdBaseClass(), tdClass));
+	const footerClasses = $derived(cn(footerBaseClass(), footerClass));
+	const paginationClasses = $derived(cn(paginationBaseClass(), paginationClass));
+	const emptyStateClasses = $derived(emptyStateBaseClass());
+
+	// Handle pagination
+	function getPaginatedData() {
+		// If no pagination or all data fits on one page, return all data
+		if (!pagination || data.length <= internalPageSize) {
+			return data;
+		}
+
+		// If external data source might be handling pagination
+		if (totalItems !== undefined) {
+			// If data.length is less than or equal to pageSize, assume it's already paginated
+			if (data.length <= internalPageSize) {
+				return data;
+			}
+		}
+
+		// Otherwise, handle pagination internally
+		const startIndex = (internalCurrentPage - 1) * internalPageSize;
+		return data.slice(startIndex, startIndex + internalPageSize);
+	}
+
+	// Handle sorting
+	function toggleSort(column: string) {
+		const columnDef = columns.find((col) => (col.sortKey || col.key) === column);
+		if (!columnDef?.sortable) return;
+
+		if (sortColumn === column) {
+			// Cycle through: asc -> desc -> null
+			if (sortDirection === 'asc') {
+				sortDirection = 'desc';
+			} else if (sortDirection === 'desc') {
+				sortDirection = null;
+				sortColumn = '';
+			} else {
+				sortDirection = 'asc';
+			}
+		} else {
+			sortColumn = column;
+			sortDirection = 'asc';
+		}
+
+		const newSortState: SortState = { column: sortColumn, direction: sortDirection };
+		onsort(newSortState);
+	}
+
+	function toggleRowSelection(row: any) {
+		if (!selectable) return;
+
+		const index = selected.findIndex((r) => r === row);
+		if (index === -1) {
+			selected = [...selected, row];
+		} else {
+			selected = selected.filter((r) => r !== row);
+		}
+
+		onselect(selected);
+	}
+
+	function isRowSelected(row: any) {
+		return selected.includes(row);
+	}
+
+	function handleRowClick(row: any, index: number) {
+		onrowclick?.(row, index);
+	}
+
+	function goToFirstPage() {
+		if (internalCurrentPage !== 1) {
+			internalCurrentPage = 1;
+			onpagechange?.(internalCurrentPage);
+		}
+	}
+
+	function goToLastPage() {
+		if (internalCurrentPage !== totalPages) {
+			internalCurrentPage = totalPages;
+			onpagechange?.(internalCurrentPage);
+		}
+	}
+
+	function nextPage() {
+		if (internalCurrentPage < totalPages) {
+			internalCurrentPage++;
+			onpagechange?.(internalCurrentPage);
+		}
+	}
+
+	function prevPage() {
+		if (internalCurrentPage > 1) {
+			internalCurrentPage--;
+			onpagechange?.(internalCurrentPage);
+		}
+	}
+
+	function goToPage(page: number) {
+		if (page >= 1 && page <= totalPages && page !== internalCurrentPage) {
+			internalCurrentPage = page;
+			onpagechange?.(internalCurrentPage);
+		}
+	}
+
+	function handlePageSizeChange(event: Event) {
+		const select = event.target as HTMLSelectElement;
+		const newPageSize = parseInt(select.value, 10);
+		internalPageSize = newPageSize;
+
+		// Adjust current page if it would exceed the new total pages
+		const newTotalPages = Math.ceil(effectiveTotalItems / newPageSize);
+		if (internalCurrentPage > newTotalPages) {
+			internalCurrentPage = newTotalPages || 1;
+		}
+
+		onpagesizechange?.(newPageSize);
+		onpagechange?.(internalCurrentPage);
+	}
+
+	function getPageNumbers(): number[] {
+		const pages: number[] = [];
+		const maxPages = 5;
+		const halfMax = Math.floor(maxPages / 2);
+
+		let start = Math.max(1, internalCurrentPage - halfMax);
+		let end = Math.min(totalPages, start + maxPages - 1);
+
+		if (end - start + 1 < maxPages) {
+			start = Math.max(1, end - maxPages + 1);
+		}
+
+		for (let i = start; i <= end; i++) {
+			pages.push(i);
+		}
+
+		return pages;
+	}
+</script>
+
+<div class={baseClasses}>
+	{#if showPaginationControls && (paginationPosition === 'top' || paginationPosition === 'both')}
+		<div class={footerClasses}>
+			<div class={paginationClasses}>
+				<div class="flex items-center gap-2">
+					{#if showPageSize}
+						<div class="flex items-center gap-2">
+							<label for="table-page-size" class="text-default-500 text-sm">Show</label>
+							<select
+								id="table-page-size"
+								class="border-default-200 rounded-md border px-2 py-1 text-sm"
+								value={internalPageSize}
+								onchange={handlePageSizeChange}
+							>
+								{#each pageSizeOptions as option}
+									<option value={option}>{option}</option>
+								{/each}
+							</select>
+							<span class="text-default-500 text-sm">entries</span>
+						</div>
+					{/if}
+					<span class="text-default-500 text-sm">
+						Showing {Math.min(
+							(internalCurrentPage - 1) * internalPageSize + 1,
+							effectiveTotalItems
+						)}
+						to {Math.min(internalCurrentPage * internalPageSize, effectiveTotalItems)} of {effectiveTotalItems}
+						entries
+					</span>
+				</div>
+
+				<div class="flex items-center gap-1">
+					{#if paginationTemplate === 'full'}
+						<!-- First page button -->
+						<button
+							type="button"
+							class={cn(
+								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+								internalCurrentPage === 1
+									? 'text-default-300 cursor-not-allowed'
+									: 'text-default-700 hover:bg-default-100'
+							)}
+							onclick={goToFirstPage}
+							disabled={internalCurrentPage === 1}
+							aria-label="First page"
+						>
+							<!-- Double Chevron Left SVG -->
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-4 w-4"
+							>
+								<path d="m11 17-5-5 5-5"></path>
+								<path d="m18 17-5-5 5-5"></path>
+							</svg>
+						</button>
+					{/if}
+
+					<!-- Previous page button -->
+					<button
+						type="button"
+						class={cn(
+							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+							internalCurrentPage === 1
+								? 'text-default-300 cursor-not-allowed'
+								: 'text-default-700 hover:bg-default-100'
+						)}
+						onclick={prevPage}
+						disabled={internalCurrentPage === 1}
+						aria-label="Previous page"
+					>
+						<!-- Chevron Left SVG -->
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="h-4 w-4"
+						>
+							<path d="m15 18-6-6 6-6"></path>
+						</svg>
+					</button>
+
+					<!-- Page numbers -->
+					{#if paginationTemplate === 'full'}
+						{#each getPageNumbers() as pageNum}
+							<button
+								type="button"
+								class={cn(
+									'relative inline-flex items-center rounded-md px-3 py-1 text-sm font-medium',
+									internalCurrentPage === pageNum
+										? 'bg-primary-100 text-primary-700'
+										: 'text-default-700 hover:bg-default-100'
+								)}
+								onclick={() => goToPage(pageNum)}
+								aria-label={`Page ${pageNum}`}
+								aria-current={internalCurrentPage === pageNum ? 'page' : undefined}
+							>
+								{pageNum}
+							</button>
+						{/each}
+					{:else}
+						<span class="text-default-500 px-2 text-sm">
+							Page {internalCurrentPage} of {totalPages}
+						</span>
+					{/if}
+
+					<!-- Next page button -->
+					<button
+						type="button"
+						class={cn(
+							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+							internalCurrentPage === totalPages
+								? 'text-default-300 cursor-not-allowed'
+								: 'text-default-700 hover:bg-default-100'
+						)}
+						onclick={nextPage}
+						disabled={internalCurrentPage === totalPages}
+						aria-label="Next page"
+					>
+						<!-- Chevron Right SVG -->
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="h-4 w-4"
+						>
+							<path d="m9 18 6-6-6-6"></path>
+						</svg>
+					</button>
+
+					{#if paginationTemplate === 'full'}
+						<!-- Last page button -->
+						<button
+							type="button"
+							class={cn(
+								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+								internalCurrentPage === totalPages
+									? 'text-default-300 cursor-not-allowed'
+									: 'text-default-700 hover:bg-default-100'
+							)}
+							onclick={goToLastPage}
+							disabled={internalCurrentPage === totalPages}
+							aria-label="Last page"
+						>
+							<!-- Double Chevron Right SVG -->
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-4 w-4"
+							>
+								<path d="m13 17 5-5-5-5"></path>
+								<path d="m6 17 5-5-5-5"></path>
+							</svg>
+						</button>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<div class={wrapperClasses}>
+		<table class={tableClasses}>
+			<thead class={theadClasses}>
+				<tr>
+					{#if selectable}
+						<th class={cn(thClasses, 'text-center')}>
+							<input
+								type="checkbox"
+								onchange={() => {
+									if (selected.length === data.length) {
+										selected = [];
+									} else {
+										selected = [...data];
+									}
+									onselect(selected);
+								}}
+								checked={selected.length === data.length && data.length > 0}
+								aria-label="Select all rows"
+							/>
+						</th>
+					{/if}
+
+					{#each columns as column (column.key)}
+						<th
+							class={cn(
+								thClasses,
+								column.align === 'center' && 'text-center',
+								column.align === 'right' && 'text-right',
+								column.class
+							)}
+							style={column.width ? `width: ${column.width}` : undefined}
+						>
+							{#if column.sortable}
+								<button
+									type="button"
+									class={sortButtonBaseClass()}
+									onclick={() => toggleSort(column.sortKey || column.key)}
+									aria-label={`Sort by ${column.header}`}
+								>
+									{column.header}
+									<span class={sortIconBaseClass()}>
+										{#if sortColumn === (column.sortKey || column.key)}
+											{#if sortDirection === 'asc'}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="h-4 w-4"
+												>
+													<path
+														d="M10 15a.75.75 0 01-.75-.75V7.612L6.058 10.8a.75.75 0 01-1.061-1.061l3.75-3.75a.75.75 0 011.06 0l3.75 3.75a.75.75 0 11-1.06 1.061L10.75 7.612v6.638A.75.75 0 0110 15z"
+													/>
+												</svg>
+											{:else if sortDirection === 'desc'}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="h-4 w-4"
+												>
+													<path
+														d="M10 5a.75.75 0 01.75.75v6.638l3.192-3.187a.75.75 0 111.06 1.061l-3.75 3.75a.75.75 0 01-1.06 0l-3.75-3.75a.75.75 0 111.06-1.061L9.25 12.389V5.75A.75.75 0 0110 5z"
+													/>
+												</svg>
+											{/if}
+										{:else}
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												class="h-4 w-4 opacity-40"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+												/>
+											</svg>
+										{/if}
+									</span>
+								</button>
+							{:else}
+								{column.header}
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			</thead>
+
+			<tbody class={tbodyClasses}>
+				{#if loading}
+					<tr>
+						<td
+							colspan={selectable ? columns.length + 1 : columns.length}
+							class={cn(tdClasses, 'py-8 text-center')}
+						>
+							<div class="flex justify-center">
+								<svg
+									class="text-default-500 h-6 w-6 animate-spin"
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+								>
+									<circle
+										class="opacity-25"
+										cx="12"
+										cy="12"
+										r="10"
+										stroke="currentColor"
+										stroke-width="4"
+									></circle>
+									<path
+										class="opacity-75"
+										fill="currentColor"
+										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+									></path>
+								</svg>
+							</div>
+						</td>
+					</tr>
+				{:else if getPaginatedData().length === 0}
+					<tr>
+						<td
+							colspan={selectable ? columns.length + 1 : columns.length}
+							class={emptyStateClasses}
+						>
+							No data available
+						</td>
+					</tr>
+				{:else}
+					{#each getPaginatedData() as row, rowIndex}
+						<tr
+							class={cn(trClasses, rowclass(row, rowIndex), {
+								'bg-primary-100': selectable && isRowSelected(row),
+								'cursor-pointer': onrowclick
+							})}
+							onclick={() => handleRowClick(row, rowIndex)}
+							aria-selected={selectable && isRowSelected(row)}
+						>
+							{#if selectable}
+								<td class={cn(tdClasses, 'text-center')}>
+									<input
+										type="checkbox"
+										checked={isRowSelected(row)}
+										onclick={(e) => {
+											e.stopPropagation(); // Prevent row click
+											toggleRowSelection(row);
+										}}
+										aria-label={`Select row ${rowIndex + 1}`}
+									/>
+								</td>
+							{/if}
+
+							{#each columns as column (column.key)}
+								<td
+									class={cn(
+										tdClasses,
+										column.align === 'center' && 'text-center',
+										column.align === 'right' && 'text-right',
+										column.class
+									)}
+								>
+									{#if column.cell}
+										{@render column.cell(row, column.key, rowIndex)}
+									{:else if row[column.key] === undefined || row[column.key] === null}
+										<span class="text-default-300">—</span>
+									{:else}
+										{row[column.key]}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+						{#if expandedContent}
+							<tr class="expandedContent-row">
+								<td colspan={selectable ? columns.length + 1 : columns.length} class="border-0 p-0">
+									{@render expandedContent(row)}
+								</td>
+							</tr>
+						{/if}
+					{/each}
+				{/if}
+			</tbody>
+		</table>
+	</div>
+
+	{#if showPaginationControls && (paginationPosition === 'bottom' || paginationPosition === 'both')}
+		<div class={footerClasses}>
+			<div class={paginationClasses}>
+				<div class="flex items-center gap-2">
+					{#if showPageSize}
+						<div class="flex items-center gap-2">
+							<label for="table-page-size-bottom" class="text-default-500 text-sm">Show</label>
+							<select
+								id="table-page-size-bottom"
+								class="border-default-200 rounded-md border px-2 py-1 text-sm"
+								value={internalPageSize}
+								onchange={handlePageSizeChange}
+							>
+								{#each pageSizeOptions as option}
+									<option value={option}>{option}</option>
+								{/each}
+							</select>
+							<span class="text-default-500 text-sm">entries</span>
+						</div>
+					{/if}
+					<span class="text-default-500 text-sm">
+						Showing {Math.min(
+							(internalCurrentPage - 1) * internalPageSize + 1,
+							effectiveTotalItems
+						)}
+						to {Math.min(internalCurrentPage * internalPageSize, effectiveTotalItems)} of {effectiveTotalItems}
+						entries
+					</span>
+				</div>
+
+				<div class="flex items-center gap-1">
+					{#if paginationTemplate === 'full'}
+						<!-- First page button -->
+						<button
+							type="button"
+							class={cn(
+								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+								internalCurrentPage === 1
+									? 'text-default-300 cursor-not-allowed'
+									: 'text-default-700 hover:bg-default-100'
+							)}
+							onclick={goToFirstPage}
+							disabled={internalCurrentPage === 1}
+							aria-label="First page"
+						>
+							<!-- Double Chevron Left SVG -->
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-4 w-4"
+							>
+								<path d="m11 17-5-5 5-5"></path>
+								<path d="m18 17-5-5 5-5"></path>
+							</svg>
+						</button>
+					{/if}
+
+					<!-- Previous page button -->
+					<button
+						type="button"
+						class={cn(
+							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+							internalCurrentPage === 1
+								? 'text-default-300 cursor-not-allowed'
+								: 'text-default-700 hover:bg-default-100'
+						)}
+						onclick={prevPage}
+						disabled={internalCurrentPage === 1}
+						aria-label="Previous page"
+					>
+						<!-- Chevron Left SVG -->
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="h-4 w-4"
+						>
+							<path d="m15 18-6-6 6-6"></path>
+						</svg>
+					</button>
+
+					<!-- Page numbers -->
+					{#if paginationTemplate === 'full'}
+						{#each getPageNumbers() as pageNum}
+							<button
+								type="button"
+								class={cn(
+									'relative inline-flex items-center rounded-md px-3 py-1 text-sm font-medium',
+									internalCurrentPage === pageNum
+										? 'bg-primary-100 text-primary-700'
+										: 'text-default-700 hover:bg-default-100'
+								)}
+								onclick={() => goToPage(pageNum)}
+								aria-label={`Page ${pageNum}`}
+								aria-current={internalCurrentPage === pageNum ? 'page' : undefined}
+							>
+								{pageNum}
+							</button>
+						{/each}
+					{:else}
+						<span class="text-default-500 px-2 text-sm">
+							Page {internalCurrentPage} of {totalPages}
+						</span>
+					{/if}
+
+					<!-- Next page button -->
+					<button
+						type="button"
+						class={cn(
+							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+							internalCurrentPage === totalPages
+								? 'text-default-300 cursor-not-allowed'
+								: 'text-default-700 hover:bg-default-100'
+						)}
+						onclick={nextPage}
+						disabled={internalCurrentPage === totalPages}
+						aria-label="Next page"
+					>
+						<!-- Chevron Right SVG -->
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="h-4 w-4"
+						>
+							<path d="m9 18 6-6-6-6"></path>
+						</svg>
+					</button>
+
+					{#if paginationTemplate === 'full'}
+						<!-- Last page button -->
+						<button
+							type="button"
+							class={cn(
+								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+								internalCurrentPage === totalPages
+									? 'text-default-300 cursor-not-allowed'
+									: 'text-default-700 hover:bg-default-100'
+							)}
+							onclick={goToLastPage}
+							disabled={internalCurrentPage === totalPages}
+							aria-label="Last page"
+						>
+							<!-- Double Chevron Right SVG -->
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-4 w-4"
+							>
+								<path d="m13 17 5-5-5-5"></path>
+								<path d="m6 17 5-5-5-5"></path>
+							</svg>
+						</button>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>