windmill-components 1.85.0 → 1.87.0

package/components/apps/editor/AppPreview.svelte

@@ -1,159 +0,0 @@
-<script>import { setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import { buildWorld } from '../rx';
-import { classNames } from '../../../utils';
-import Button from '../../common/button/Button.svelte';
-import { Unlock } from 'lucide-svelte';
-import RecomputeAllComponents from './RecomputeAllComponents.svelte';
-import GridViewer from './GridViewer.svelte';
-import { Component } from './component';
-import { twMerge } from 'tailwind-merge';
-import { columnConfiguration } from '../gridUtils';
-import { HiddenComponent } from '../components';
-import { deepEqual } from 'fast-equals';
-import { dfs } from './appUtils';
-export let app;
-export let appPath;
-export let breakpoint;
-export let policy;
-export let summary;
-export let workspace;
-export let isEditor;
-export let context;
-export let noBackend = false;
-export let isLocked = false;
-const appStore = writable(app);
-const selectedComponent = writable(undefined);
-const mode = writable('preview');
-const connectingInput = writable({
-    opened: false,
-    input: undefined,
-    hoveredComponent: undefined
-});
-const allIdsInPath = writable([]);
-const parentWidth = writable(0);
-setContext('AppViewerContext', {
-    worldStore: buildWorld(context),
-    app: appStore,
-    summary: writable(summary),
-    selectedComponent,
-    mode,
-    connectingInput,
-    breakpoint,
-    runnableComponents: writable({}),
-    appPath,
-    workspace,
-    onchange: undefined,
-    isEditor,
-    jobs: writable([]),
-    staticExporter: writable({}),
-    noBackend,
-    errorByComponent: writable({}),
-    openDebugRun: writable(undefined),
-    focusedGrid: writable(undefined),
-    stateId: writable(0),
-    parentWidth,
-    state: writable({}),
-    componentControl: writable({}),
-    hoverStore: writable(undefined),
-    allIdsInPath
-});
-let ncontext = context;
-function hashchange(e) {
-    ncontext.hash = e.newURL.split('#')[1];
-    ncontext = ncontext;
-}
-let previousSelectedIds = undefined;
-$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-    previousSelectedIds = $selectedComponent;
-    $allIdsInPath = ($selectedComponent ?? [])
-        .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
-        .filter((x) => x != undefined);
-}
-$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
-$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
-</script>
-
-<svelte:window on:hashchange={hashchange} />
-
-<div id="app-editor-top-level-drawer" />
-
-<div class="relative">
-	<div
-		class="{$$props.class} {lockedClasses} h-full 
-	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto"
-	>
-		{#if $appStore.grid}
-			<div
-				class={classNames(
-					'mx-auto',
-					width,
-					$appStore?.norefreshbar ? 'invisible h-0 overflow-hidden' : ''
-				)}
-			>
-				<div
-					class="w-full sticky z-[1001] top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
-				>
-					<h2 class="truncate">{summary}</h2>
-					<RecomputeAllComponents />
-					<div class="text-2xs text-gray-600">
-						{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
-					</div>
-				</div>
-			</div>
-		{/if}
-
-		<div
-			style={app.css?.['app']?.['grid']?.style}
-			class={twMerge('px-4 pt-4 pb-2 overflow-visible', app.css?.['app']?.['grid']?.class ?? '')}
-			bind:clientWidth={$parentWidth}
-		>
-			<div>
-				<GridViewer
-					allIdsInPath={$allIdsInPath}
-					items={app.grid}
-					let:dataItem
-					rowHeight={36}
-					cols={columnConfiguration}
-					gap={[4, 2]}
-				>
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						class={'h-full w-full center-center'}
-						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
-					>
-						<Component render={true} component={dataItem.data} selected={false} locked={true} />
-					</div>
-				</GridViewer>
-			</div>
-		</div>
-	</div>
-
-	{#if isLocked}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div
-			on:click={() => (isLocked = false)}
-			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
-		>
-			<Button on:click={() => (isLocked = false)}>
-				Unlock preview
-				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
-			</Button>
-		</div>
-	{/if}
-</div>
-
-{#if app.hiddenInlineScripts}
-	{#each app.hiddenInlineScripts as script, index}
-		{#if script}
-			<HiddenComponent
-				id={`bg_${index}`}
-				inlineScript={script.inlineScript}
-				name={script.name}
-				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
-				recomputableByRefreshButton={script.autoRefresh ?? false}
-			/>
-		{/if}
-	{/each}
-{/if}

package/components/apps/editor/ComponentHeader.svelte

@@ -1,110 +0,0 @@
-<script>import { classNames } from '../../../utils';
-import { Anchor, Bug, Expand, Move } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
-import Popover from '../../Popover.svelte';
-import { Alert, Button } from '../../common';
-import { twMerge } from 'tailwind-merge';
-import { getErrorFromLatestResult } from './appUtils';
-export let component;
-export let selected;
-export let locked = false;
-export let hover = false;
-export let shouldHideActions = false;
-const dispatch = createEventDispatcher();
-const { errorByComponent, openDebugRun, jobs, connectingInput } = getContext('AppViewerContext');
-$: error = getErrorFromLatestResult(component.id, $errorByComponent, $jobs);
-function openDebugRuns() {
-    if ($openDebugRun) {
-        $openDebugRun(component.id);
-    }
-}
-</script>
-
-{#if selected || hover}
-	<span
-		on:mousedown|stopPropagation|capture
-		draggable="false"
-		title={`Id: ${component.id}`}
-		class={twMerge(
-			'px-2 text-2xs font-semibold w-fit absolute shadow -top-[9px] -left-[8px] border rounded-sm z-50 cursor-move',
-			selected
-				? 'bg-indigo-500/90 border-indigo-600 text-white'
-				: $connectingInput.opened
-				? 'bg-red-500/90 border-red-600 text-white'
-				: 'bg-blue-500/90 border-blue-600 text-white'
-		)}
-	>
-		{component.id}
-	</span>
-{/if}
-
-{#if selected && !shouldHideActions}
-	<div class="top-[-9px] -right-[8px] flex flex-row absolute gap-1.5 z-50">
-		<button
-			title="Expand"
-			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-			)}
-			on:click={() => dispatch('expand')}
-			on:pointerdown|stopPropagation
-		>
-			<Expand aria-label="Expand position" size={14} />
-		</button>
-		<button
-			title="Lock Position"
-			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border  rounded-sm cursor-pointer',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-			)}
-			on:click={() => dispatch('lock')}
-			on:pointerdown|stopPropagation
-		>
-			{#if locked}
-				<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
-			{:else}
-				<Anchor aria-label="Lock position" size={14} />
-			{/if}
-		</button>
-		<span
-			draggable="false"
-			title="Move"
-			on:mousedown|stopPropagation|capture
-			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-move rounded-sm',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-			)}
-		>
-			<Move size={14} />
-		</span>
-	</div>
-{/if}
-
-{#if error}
-	{@const json = JSON.parse(JSON.stringify(error))}
-	<span
-		title="Error"
-		class={classNames(
-			'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-1  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
-			'bg-red-100/80'
-		)}
-	>
-		<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
-			<Bug size={14} />
-			<span slot="text">
-				<div class="bg-white">
-					<Alert type="error" title={`${json?.name}: ${json?.message}`}>
-						<div class="flex flex-col gap-2">
-							<div>
-								<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs">
-									{json?.stack ?? ''}	
-								</pre>
-							</div>
-							<Button color="red" variant="border" on:click={openDebugRuns}>Open Debug Runs</Button>
-						</div>
-					</Alert>
-				</div>
-			</span>
-		</Popover>
-	</span>
-{/if}

package/components/apps/editor/ComponentHeader.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from './component';
-declare const __propDef: {
-    props: {
-        component: AppComponent;
-        selected: boolean;
-        locked?: boolean | undefined;
-        hover?: boolean | undefined;
-        shouldHideActions?: boolean | undefined;
-    };
-    events: {
-        mousedown: MouseEvent;
-        pointerdown: PointerEvent;
-        expand: CustomEvent<any>;
-        lock: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ComponentHeaderProps = typeof __propDef.props;
-export type ComponentHeaderEvents = typeof __propDef.events;
-export type ComponentHeaderSlots = typeof __propDef.slots;
-export default class ComponentHeader extends SvelteComponentTyped<ComponentHeaderProps, ComponentHeaderEvents, ComponentHeaderSlots> {
-}
-export {};

package/components/apps/editor/GridEditor.svelte

@@ -1,153 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
-import { twMerge } from 'tailwind-merge';
-import RecomputeAllComponents from './RecomputeAllComponents.svelte';
-import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
-import Component from './component/Component.svelte';
-import { push } from '../../../history';
-import { dfs, expandGriditem, findGridItem } from './appUtils';
-import Grid from '../svelte-grid/Grid.svelte';
-import { deepEqual } from 'fast-equals';
-import ComponentWrapper from './component/ComponentWrapper.svelte';
-import { classNames } from '../../../utils';
-export let policy;
-const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
-const { history } = getContext('AppEditorContext');
-let previousSelectedIds = undefined;
-$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-    previousSelectedIds = $selectedComponent;
-    $allIdsInPath = ($selectedComponent ?? [])
-        .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
-        .filter((x) => x != undefined);
-}
-function removeGridElement(component) {
-    if (component) {
-        $app.grid = $app.grid.filter((gridComponent) => {
-            if (gridComponent.data.id === component.id) {
-                if (gridComponent.data.componentInput?.type === 'runnable' &&
-                    gridComponent.data.componentInput?.runnable?.type === 'runnableByName' &&
-                    gridComponent.data.componentInput?.runnable.inlineScript) {
-                    const { name, inlineScript } = gridComponent.data.componentInput?.runnable;
-                    if (!$app.unusedInlineScripts) {
-                        $app.unusedInlineScripts = [];
-                    }
-                    $app.unusedInlineScripts.push({
-                        name,
-                        inlineScript
-                    });
-                    $app = $app;
-                }
-            }
-            return gridComponent.data.id !== component?.id;
-        });
-        delete $runnableComponents[component.id];
-        $runnableComponents = $runnableComponents;
-        $selectedComponent = undefined;
-    }
-}
-</script>
-
-<div class="relative w-full z-20 overflow-visible">
-	<div
-		class="w-full sticky top-0 flex justify-between border-b {$connectingInput?.opened
-			? ''
-			: 'bg-gray-50 '} px-4 py-1 items-center gap-4"
-		style="z-index: 1000;"
-	>
-		<h2 class="truncate">{$summary}</h2>
-		{#if !$connectingInput.opened}
-			<RecomputeAllComponents />
-		{/if}
-		<div class="flex text-2xs text-gray-600 gap-1 items-center">
-			<div class="py-2 pr-2  text-gray-600 flex gap-2 items-center">
-				Hide bar on view
-				<input class="windmillapp" type="checkbox" bind:checked={$app.norefreshbar} />
-			</div>
-			<div>
-				{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
-			</div>
-		</div>
-	</div>
-
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div
-		style={$app.css?.['app']?.['grid']?.style}
-		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
-		on:pointerdown={() => {
-			$selectedComponent = undefined
-			$focusedGrid = undefined
-		}}
-		bind:clientWidth={$parentWidth}
-	>
-		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
-			<Grid
-				allIdsInPath={$allIdsInPath}
-				selectedIds={$selectedComponent}
-				items={$app.grid}
-				on:redraw={(e) => {
-					push(history, $app)
-					$app.grid = e.detail
-				}}
-				let:dataItem
-				rowHeight={36}
-				cols={columnConfiguration}
-				fastStart={true}
-				gap={[4, 2]}
-			>
-				<ComponentWrapper
-					id={dataItem.id}
-					type={dataItem.data.type}
-					class={classNames(
-						'h-full w-full center-center',
-						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
-					)}
-				>
-					<Component
-						render={true}
-						component={dataItem.data}
-						selected={Boolean($selectedComponent?.includes(dataItem.id))}
-						locked={isFixed(dataItem)}
-						on:delete={() => removeGridElement(dataItem.data)}
-						on:lock={() => {
-							const gridItem = findGridItem($app, dataItem.id)
-							if (gridItem) {
-								toggleFixed(gridItem)
-							}
-							$app = $app
-						}}
-						on:expand={() => {
-							push(history, $app)
-							$selectedComponent = [dataItem.id]
-							expandGriditem($app.grid, dataItem.id, $breakpoint)
-							$app = $app
-						}}
-					/>
-				</ComponentWrapper>
-			</Grid>
-		</div>
-	</div>
-</div>
-
-{#if $app.hiddenInlineScripts}
-	{#each $app.hiddenInlineScripts as script, index}
-		{#if script}
-			<HiddenComponent
-				id={`bg_${index}`}
-				inlineScript={script.inlineScript}
-				name={script.name}
-				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
-				recomputableByRefreshButton={script.autoRefresh ?? false}
-			/>
-		{/if}
-	{/each}
-{/if}
-
-<style global>
-	:global(.svlt-grid-shadow) {
-		/* Back shadow */
-		background: #93c4fdd0 !important;
-	}
-	:global(.svlt-grid-active) {
-		opacity: 1 !important;
-	}</style>

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -1,104 +0,0 @@
-<script>import Dropdown from '../../Dropdown.svelte';
-import { ChevronDown, RefreshCw } from 'lucide-svelte';
-import { getContext, onMount } from 'svelte';
-import Button from '../../common/button/Button.svelte';
-import { allItems } from '../utils';
-const { runnableComponents, app, worldStore } = getContext('AppViewerContext');
-let loading = false;
-let timeout = undefined;
-let interval = undefined;
-let shouldRefresh = false;
-let firstLoad = false;
-$: !firstLoad &&
-    $worldStore.initializedOutputs ==
-        allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
-    refresh();
-$: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length;
-function onClick(stopAfterClear = true) {
-    if (timeout) {
-        clearInterval(timeout);
-        timeout = undefined;
-        shouldRefresh = false;
-        if (stopAfterClear)
-            return;
-    }
-    refresh();
-    if (interval) {
-        shouldRefresh = true;
-        timeout = setInterval(refresh, interval);
-    }
-}
-function setInter(inter) {
-    interval = inter;
-    onClick(!inter);
-}
-function refresh() {
-    if (!firstLoad) {
-        $worldStore.initialized = true;
-        firstLoad = true;
-    }
-    loading = true;
-    Promise.all(Object.keys($runnableComponents).map((id) => {
-        if (!$runnableComponents?.[id]?.autoRefresh) {
-            return;
-        }
-        return $runnableComponents?.[id]?.cb?.();
-    })).finally(() => {
-        loading = false;
-    });
-}
-function visChange() {
-    if (document.visibilityState === 'hidden') {
-        if (timeout) {
-            clearInterval(timeout);
-            timeout = undefined;
-        }
-    }
-    else if (shouldRefresh) {
-        timeout = setInterval(refresh, interval);
-    }
-}
-onMount(() => {
-    document.addEventListener('visibilitychange', visChange);
-    // setTimeout(() => refresh(), 1000)
-    return () => {
-        document.removeEventListener('visibilitychange', visChange);
-        if (timeout)
-            clearInterval(timeout);
-    };
-});
-</script>
-
-<div class="flex items-center">
-	<Button
-		disabled={componentNumber == 0}
-		on:click={() => onClick()}
-		color={timeout ? 'blue' : 'light'}
-		variant={timeout ? 'contained' : 'border'}
-		size="xs"
-		btnClasses="!rounded-r-none {timeout ? '!border !border-blue-500' : ''}"
-		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
-			? `every ${interval / 1000} seconds`
-			: 'once'}"
-	>
-		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} /> &nbsp;({componentNumber})
-	</Button>
-	<Dropdown
-		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
-		color={timeout ? 'blue' : 'light'}
-		variant="border"
-		dropdownItems={[
-			{
-				displayName: 'Once',
-				action: () => setInter(undefined)
-			},
-			...[1, 2, 3, 4, 5, 6].map((i) => ({
-				displayName: `Every ${i * 5} seconds`,
-				action: () => setInter(i * 5000)
-			}))
-		]}
-	>
-		<span class="grow text center">{interval ? `${interval / 1000}s` : 'once'}</span>
-		<ChevronDown class="ml-0.5" size={14} />
-	</Dropdown>
-</div>

package/components/apps/editor/SettingsPanel.svelte

@@ -1,118 +0,0 @@
-<script>import Toggle from '../../Toggle.svelte';
-import Tooltip from '../../Tooltip.svelte';
-import { getContext } from 'svelte';
-import { allItems } from '../utils';
-import { findGridItem } from './appUtils';
-import PanelSection from './settingsPanel/common/PanelSection.svelte';
-import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
-import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
-import BackgroundScriptTriggerList from './settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte';
-const { selectedComponent, app, stateId } = getContext('AppViewerContext');
-$: hiddenInlineScript = $app?.hiddenInlineScripts
-    ?.map((x, i) => ({ script: x, index: i }))
-    .find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`));
-$: componentSettings = findComponentSettings($app, $selectedComponent?.[0]);
-$: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0]);
-function findTableActionSettings(app, id) {
-    return allItems(app.grid, app.subgrids)
-        .map((x) => {
-        if (x?.data?.type === 'tablecomponent') {
-            if (x?.data?.actionButtons) {
-                const tableAction = x.data.actionButtons.find((x) => x.id === id);
-                if (tableAction) {
-                    return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id };
-                }
-            }
-        }
-    })
-        .find((x) => x);
-}
-function findComponentSettings(app, id) {
-    if (!id)
-        return undefined;
-    if (app?.grid) {
-        const gridItem = app.grid.find((x) => x.data?.id === id);
-        if (gridItem) {
-            return { item: gridItem, parent: undefined };
-        }
-    }
-    if (app?.subgrids) {
-        for (const key of Object.keys(app.subgrids ?? {})) {
-            const gridItem = app.subgrids[key].find((x) => x.data?.id === id);
-            if (gridItem) {
-                return { item: gridItem, parent: key };
-            }
-        }
-    }
-    return undefined;
-}
-</script>
-
-{#if componentSettings}
-	{#key componentSettings?.item?.id}
-		<ComponentPanel bind:componentSettings />
-	{/key}
-{:else if tableActionSettings}
-	{#key tableActionSettings?.item?.data?.id}
-		<ComponentPanel
-			noGrid
-			rowColumns
-			bind:componentSettings={tableActionSettings}
-			duplicateMoveAllowed={false}
-			onDelete={() => {
-				if (tableActionSettings) {
-					const parent = findGridItem($app, tableActionSettings.parent)
-					if (!parent) return
-
-					if (parent.data.type === 'tablecomponent') {
-						parent.data.actionButtons = parent.data.actionButtons.filter(
-							(x) => x.id !== tableActionSettings?.item.id
-						)
-					}
-				}
-			}}
-		/>
-	{/key}
-{:else if hiddenInlineScript}
-	<div class="min-h-full flex flex-col divide-y">
-		<PanelSection title={`Configuration`}>
-			<div class="flex items-center">
-				<Toggle
-					bind:checked={hiddenInlineScript.script.autoRefresh}
-					options={{ right: 'Run on start and app refresh' }}
-				/>
-				<Tooltip>
-					You may want to disable this so that the background script is only triggered by changes to
-					other values or triggered by another computation on a button (See 'Recompute Others')
-				</Tooltip>
-			</div>
-		</PanelSection>
-
-		<div class="p-2">
-			{#if hiddenInlineScript.script.inlineScript}
-				<BackgroundScriptTriggerList
-					fields={hiddenInlineScript.script.fields}
-					autoRefresh={hiddenInlineScript.script.autoRefresh}
-					id={`bg_${hiddenInlineScript.index}`}
-					bind:doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
-					bind:inlineScript={hiddenInlineScript.script.inlineScript}
-				/>
-			{:else}
-				<span class="text-gray-600 text-xs">No hiddenInlineScript.script defined</span>
-			{/if}
-		</div>
-		{#if Object.keys(hiddenInlineScript.script.fields).length > 0}
-			<PanelSection title={`Inputs`}>
-				{#key $stateId}
-					<InputsSpecsEditor
-						id={`bg_${hiddenInlineScript.index}`}
-						shouldCapitalize={false}
-						bind:inputSpecs={hiddenInlineScript.script.fields}
-						userInputEnabled={false}
-					/>
-				{/key}
-			</PanelSection>
-		{/if}
-		<div class="grow shrink" />
-	</div>
-{/if}