@mrintel/villain-ui 0.2.2 → 0.6.3

package/dist/components/forms/RangeSlider.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { value = $bindable(0), min = 0, max = 100, step = 1, disabled = false, label, showValue = true, id = createId('range'), oninput } = $props();
+const percentage = $derived(max === min ? 0 : ((value - min) / (max - min)) * 100);
+</script>
+
+<div>
+  {#if label || showValue}
+    <div class="flex justify-between items-center mb-2">
+      {#if label}
+        <label for={id} class="text-text-soft text-sm">
+          {label}
+        </label>
+      {/if}
+      {#if showValue}
+        <span class="text-text-soft text-sm">
+          {value}
+        </span>
+      {/if}
+    </div>
+  {/if}
+  <input
+    type="range"
+    {id}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    bind:value
+    oninput={oninput}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    class="w-full h-2 rounded-pill appearance-none cursor-pointer transition-opacity duration-200 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    style="background: linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) {percentage}%, var(--color-base-3) {percentage}%, var(--color-base-3) 100%); border: 1px solid var(--color-border);"
+  />
+</div>
+
+<style>
+  input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-accent);
+    box-shadow: var(--shadow-accent-glow);
+    cursor: pointer;
+    transition: transform 0.2s var(--ease-luxe);
+  }
+
+  input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-accent);
+    box-shadow: var(--shadow-accent-glow);
+    cursor: pointer;
+    transition: transform 0.2s var(--ease-luxe);
+    border: none;
+  }
+
+  input[type="range"]::-moz-range-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  input[type="range"]:focus::-webkit-slider-thumb {
+    box-shadow: 
+      var(--shadow-accent-glow),
+      0 0 0 3px var(--color-base-1),
+      0 0 0 5px var(--color-accent);
+  }
+
+  input[type="range"]:focus::-moz-range-thumb {
+    box-shadow: 
+      var(--shadow-accent-glow),
+      0 0 0 3px var(--color-base-1),
+      0 0 0 5px var(--color-accent);
+  }
+
+  input[type="range"]:disabled::-webkit-slider-thumb {
+    cursor: not-allowed;
+  }
+
+  input[type="range"]:disabled::-moz-range-thumb {
+    cursor: not-allowed;
+  }</style>

package/dist/components/forms/RangeSlider.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label?: string;
+    showValue?: boolean;
+    id?: string;
+    oninput?: (event: Event) => void;
+}
+declare const RangeSlider: import("svelte").Component<Props, {}, "value">;
+type RangeSlider = ReturnType<typeof RangeSlider>;
+export default RangeSlider;

package/dist/components/forms/Select.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
+let { value = $bindable(''), options, placeholder, disabled = false, error = false, label, id = createId('select'), onchange, iconBefore, class: className = '', } = $props();
+const chevronIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23A855F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E";
+const selectClasses = `${baseInputClasses} pr-12 appearance-none bg-no-repeat bg-[right_1rem_center] bg-[length:16px] cursor-pointer`;
+const errorClasses = $derived(error ? 'error-state' : '');
+</script>
+
+{#if label}
+	<div>
+		<label for={id} class="text-text-soft text-sm mb-2 block">
+			{label}
+		</label>
+		<div class="relative">
+			{#if iconBefore}
+				<span
+					class="absolute left-4 top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
+				>
+					{@render iconBefore()}
+				</span>
+			{/if}
+
+			<select
+				{id}
+				{disabled}
+				bind:value
+				{onchange}
+				class="{selectClasses} {focusClasses} {errorClasses} {disabled
+					? disabledClasses
+					: ''} {className}"
+				class:pl-12={iconBefore}
+				style={`background-image: url('${chevronIcon}')`}
+			>
+				{#if placeholder}
+					<option disabled value="" aria-hidden="true" hidden
+						>{placeholder}</option
+					>
+				{/if}
+
+				{#each options as option}
+					<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
+		</div>
+	</div>
+{:else}
+	<div class="relative">
+		{#if iconBefore}
+			<span
+				class="absolute left-4 top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none"
+			>
+				{@render iconBefore()}
+			</span>
+		{/if}
+
+		<select
+			{id}
+			{disabled}
+			bind:value
+			{onchange}
+			class="{selectClasses} {focusClasses} {errorClasses} {disabled
+				? disabledClasses
+				: ''} {className}"
+			class:pl-12={iconBefore}
+			style={`background-image: url('${chevronIcon}')`}
+		>
+			{#if placeholder}
+				<option disabled value="" aria-hidden="true" hidden
+					>{placeholder}</option
+				>
+			{/if}
+
+			{#each options as option}
+				<option value={option.value}>{option.label}</option>
+			{/each}
+		</select>
+	</div>
+{/if}
+
+<style>
+	/* Force dark dropdown (Firefox + Chromium) */
+	select {
+		color-scheme: var(--color-base-0);
+	}
+
+	/* Option styling */
+	select option {
+		background-color: var(--color-base-2);
+		color: var(--color-text);
+		padding: 0.5rem;
+	}
+
+	select option:hover {
+    background-color: var(--color-accent-overlay-50);
+    color: var(--color-text);
+	}
+	select option:focus,
+	select option:checked {
+		background-color: var(--color-accent);
+		color: var(--color-text);
+	}
+
+	select option:disabled {
+		color: var(--color-text-muted);
+		opacity: 0.5;
+	}</style>

package/dist/components/forms/Select.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface Props {
+    value?: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    id?: string;
+    onchange?: (event: Event) => void;
+    iconBefore?: import('svelte').Snippet;
+    class?: string;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/forms/Switch.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { checked = $bindable(false), disabled = false, label, id = createId('switch'), onchange, iconBefore, class: className = '' } = $props();
+</script>
+
+<label for={id} class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}">
+  <input
+    type="checkbox"
+    role="switch"
+    aria-checked={checked}
+    {id}
+    {disabled}
+    bind:checked
+    onchange={onchange}
+    class="w-14 h-7 rounded-pill bg-base-3 border border-border appearance-none transition-all duration-300 ease-luxe cursor-pointer checked:bg-accent checked:accent-glow focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-base-1 relative {disabled ? 'cursor-not-allowed' : ''}"
+  />
+  {#if iconBefore}
+    <span class="inline-flex items-center justify-center text-text-soft">
+      {@render iconBefore()}
+    </span>
+  {/if}
+  {#if label}
+    <span class="text-text text-sm select-none">
+      {label}
+    </span>
+  {/if}
+</label>
+
+<style>
+  input[type="checkbox"]::after {
+    content: '';
+    position: absolute;
+    left: 0.375rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-text);
+    transition: all 0.3s var(--ease-luxe);
+  }
+
+  input[type="checkbox"]:checked::after {
+    transform: translate(1.75rem, -50%);
+  }</style>

package/dist/components/forms/Switch.svelte.d.ts

@@ -0,0 +1,12 @@
+export interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    id?: string;
+    onchange?: (event: Event) => void;
+    iconBefore?: import('svelte').Snippet;
+    class?: string;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/forms/Textarea.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+import { baseInputClasses, focusClasses, disabledClasses } from './formClasses';
+let { value = $bindable(''), placeholder, rows = 4, disabled = false, error = false, label, id = createId('textarea'), oninput, iconBefore, class: className = '' } = $props();
+// Icon spacing: pl-12 (3rem) = left-4 (1rem) icon position + ~2rem for icon width and spacing
+// top-4 keeps icon fixed at top when textarea is resized
+// This ensures text doesn't overlap with the absolutely positioned icon
+const textareaClasses = `${baseInputClasses} resize-y min-h-[100px]`;
+const errorClasses = $derived(error ? 'error-state' : '');
+</script>
+
+{#if label}
+  <div>
+    <label for={id} class="text-text-soft text-sm mb-2 block">
+      {label}
+    </label>
+    <div class="relative">
+      {#if iconBefore}
+        <span class="absolute left-4 top-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none">
+          {@render iconBefore()}
+        </span>
+      {/if}
+      <textarea
+        {id}
+        {placeholder}
+        {disabled}
+        {rows}
+        bind:value
+        oninput={oninput}
+        class="{textareaClasses} {focusClasses} {errorClasses} {disabled ? disabledClasses : ''} {className}"
+        class:pl-12={iconBefore}
+      ></textarea>
+    </div>
+  </div>
+{:else}
+  <div class="relative">
+    {#if iconBefore}
+      <span class="absolute left-4 top-4 z-10 inline-flex items-center justify-center text-text-soft pointer-events-none">
+        {@render iconBefore()}
+      </span>
+    {/if}
+    <textarea
+      {id}
+      {placeholder}
+      {disabled}
+      {rows}
+      bind:value
+      oninput={oninput}
+      class="{textareaClasses} {focusClasses} {errorClasses} {disabled ? disabledClasses : ''} {className}"
+      class:pl-12={iconBefore}
+    ></textarea>
+  </div>
+{/if}

package/dist/components/forms/Textarea.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface Props {
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    id?: string;
+    oninput?: (event: Event) => void;
+    iconBefore?: import('svelte').Snippet;
+    class?: string;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/forms/TimePicker.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
+let { value = $bindable(''), min, max, step, placeholder, disabled = false, error = false, label, id = createId('timepicker'), onchange, class: className = '', } = $props();
+const errorClasses = $derived(error ? 'error-state' : '');
+</script>
+
+{#if label}
+	<div>
+		<label for={id} class="text-text-soft text-sm mb-2 block">
+			{label}
+		</label>
+		<input
+			type="time"
+			{id}
+			{placeholder}
+			{disabled}
+			{min}
+			{max}
+			{step}
+			bind:value
+			{onchange}
+			class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+				? disabledClasses
+				: ''} {className}"
+		/>
+	</div>
+{:else}
+	<input
+		type="time"
+		{id}
+		{placeholder}
+		{disabled}
+		{min}
+		{max}
+		{step}
+		bind:value
+		{onchange}
+		class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+			? disabledClasses
+			: ''} {className}"
+	/>
+{/if}
+
+<style>
+	input[type='time'] {
+		min-height: 3rem;
+		cursor: pointer;
+	}
+
+	input[type='time']::-webkit-calendar-picker-indicator {
+		cursor: pointer;
+		filter: invert(0.7);
+		transition: filter 120ms var(--ease-sharp);
+	}
+
+	input[type='time']:hover::-webkit-calendar-picker-indicator {
+		filter: invert(1);
+	}
+
+	input[type='time']:disabled::-webkit-calendar-picker-indicator {
+		cursor: not-allowed;
+		opacity: 0.4;
+	}</style>

package/dist/components/forms/TimePicker.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface Props {
+    value?: string;
+    min?: string;
+    max?: string;
+    step?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    id?: string;
+    onchange?: (event: Event) => void;
+    class?: string;
+}
+declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

package/dist/components/forms/formClasses.d.ts

@@ -0,0 +1,3 @@
+export declare const baseInputClasses = "glass-panel rounded-[var(--radius-lg)] px-5 py-3.5 font-body text-text placeholder:text-text-muted transition-all duration-300 ease-luxe w-full";
+export declare const focusClasses = "focus:outline-none focus:border-accent focus:accent-glow";
+export declare const disabledClasses = "opacity-50 cursor-not-allowed";

package/dist/components/forms/formClasses.js

@@ -0,0 +1,3 @@
+export const baseInputClasses = 'glass-panel rounded-[var(--radius-lg)] px-5 py-3.5 font-body text-text placeholder:text-text-muted transition-all duration-300 ease-luxe w-full';
+export const focusClasses = 'focus:outline-none focus:border-accent focus:accent-glow';
+export const disabledClasses = 'opacity-50 cursor-not-allowed';

package/dist/components/forms/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Switch } from './Switch.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as RangeSlider } from './RangeSlider.svelte';
+export { default as FileUpload } from './FileUpload.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as TimePicker } from './TimePicker.svelte';
+export { default as DateTimePicker } from './DateTimePicker.svelte';

package/dist/components/forms/index.js

@@ -0,0 +1,12 @@
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Switch } from './Switch.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as RangeSlider } from './RangeSlider.svelte';
+export { default as FileUpload } from './FileUpload.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as TimePicker } from './TimePicker.svelte';
+export { default as DateTimePicker } from './DateTimePicker.svelte';

package/dist/components/navigation/Breadcrumbs.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">let { items, separator = '/', separatorIcon } = $props();
+export {};
+</script>
+
+<nav role="navigation" aria-label="Breadcrumb">
+  <ol class="flex items-center gap-2">
+    {#each items as item, index}
+      <li class="flex items-center gap-2">
+        {#if item.href}
+          <a
+            href={item.href}
+            class="flex items-center gap-2 text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)]"
+          >
+            {#if item.icon}
+              <span class="inline-flex items-center justify-center">
+                {@render item.icon()}
+              </span>
+            {/if}
+            {item.label}
+          </a>
+        {:else if item.onclick}
+          <button
+            onclick={item.onclick}
+            class="flex items-center gap-2 text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)] cursor-pointer"
+          >
+            {#if item.icon}
+              <span class="inline-flex items-center justify-center">
+                {@render item.icon()}
+              </span>
+            {/if}
+            {item.label}
+          </button>
+        {:else}
+          <span class="flex items-center gap-2 text-sm font-[var(--font-body)] {index === items.length - 1 ? 'text-[var(--color-text)]' : 'text-[var(--color-text-soft)]'}">
+            {#if item.icon}
+              <span class="inline-flex items-center justify-center">
+                {@render item.icon()}
+              </span>
+            {/if}
+            {item.label}
+          </span>
+        {/if}
+
+        {#if index < items.length - 1}
+          <span class="text-[var(--color-text-muted)] text-sm" aria-hidden="true">
+            {#if separatorIcon}
+              {@render separatorIcon()}
+            {:else}
+              {separator}
+            {/if}
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

package/dist/components/navigation/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onclick?: () => void;
+    icon?: Snippet;
+}
+interface Props {
+    items: BreadcrumbItem[];
+    separator?: string;
+    separatorIcon?: Snippet;
+}
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/navigation/ContextMenu.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { items, open = $bindable(false), x = $bindable(0), y = $bindable(0), trigger } = $props();
+let menuElement = $state();
+let selectedIndex = $state(0);
+const menuId = createId('context-menu');
+function handleContextMenu(event) {
+    event.preventDefault();
+    x = event.clientX;
+    y = event.clientY;
+    open = true;
+    selectedIndex = 0;
+    // Adjust position if menu would overflow viewport
+    requestAnimationFrame(() => {
+        if (menuElement) {
+            const menuRect = menuElement.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            if (x + menuRect.width > viewportWidth) {
+                x = viewportWidth - menuRect.width - 10;
+            }
+            if (y + menuRect.height > viewportHeight) {
+                y = viewportHeight - menuRect.height - 10;
+            }
+        }
+    });
+}
+function handleItemClick(item) {
+    if (item.disabled)
+        return;
+    item.onclick?.();
+    open = false;
+}
+function handleMenuKeyDown(event) {
+    // Derive current index from focused element to stay in sync
+    const focusedElement = document.activeElement;
+    const dataIndex = focusedElement?.getAttribute('data-index');
+    if (dataIndex !== null) {
+        const currentFocusedIndex = parseInt(dataIndex || '0', 10);
+        if (!isNaN(currentFocusedIndex) && currentFocusedIndex >= 0 && currentFocusedIndex < items.length) {
+            selectedIndex = currentFocusedIndex;
+        }
+    }
+    const enabledItems = items.filter(item => !item.disabled);
+    const currentEnabledIndex = enabledItems.findIndex(item => item.id === items[selectedIndex]?.id);
+    let nextIndex = currentEnabledIndex;
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            nextIndex = currentEnabledIndex < enabledItems.length - 1 ? currentEnabledIndex + 1 : 0;
+            selectedIndex = items.findIndex(item => item.id === enabledItems[nextIndex]?.id);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            nextIndex = currentEnabledIndex > 0 ? currentEnabledIndex - 1 : enabledItems.length - 1;
+            selectedIndex = items.findIndex(item => item.id === enabledItems[nextIndex]?.id);
+            break;
+        case 'Home':
+            event.preventDefault();
+            selectedIndex = items.findIndex(item => item.id === enabledItems[0]?.id);
+            break;
+        case 'End':
+            event.preventDefault();
+            selectedIndex = items.findIndex(item => item.id === enabledItems[enabledItems.length - 1]?.id);
+            break;
+        case 'Enter':
+        case ' ':
+            event.preventDefault();
+            if (items[selectedIndex] && !items[selectedIndex].disabled) {
+                handleItemClick(items[selectedIndex]);
+            }
+            break;
+        case 'Escape':
+            event.preventDefault();
+            open = false;
+            break;
+    }
+}
+function handleClickOutside(event) {
+    if (menuElement && !menuElement.contains(event.target)) {
+        open = false;
+    }
+}
+$effect(() => {
+    if (open) {
+        document.addEventListener('click', handleClickOutside);
+        requestAnimationFrame(() => {
+            const firstItem = menuElement?.querySelector('[role="menuitem"]');
+            if (firstItem) {
+                const dataIndex = firstItem.getAttribute('data-index');
+                if (dataIndex !== null) {
+                    selectedIndex = parseInt(dataIndex, 10);
+                }
+                firstItem.focus();
+            }
+        });
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }
+});
+</script>
+
+<div oncontextmenu={handleContextMenu} role="presentation" class="contents">
+  {@render trigger?.()}
+</div>
+
+{#if open}
+  <div
+    bind:this={menuElement}
+    id={menuId}
+    role="menu"
+    tabindex="-1"
+    onkeydown={handleMenuKeyDown}
+    class="fixed z-[var(--z-50)] glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-in_0.15s_var(--ease-luxe)]"
+    style="left: {x}px; top: {y}px;"
+  >
+    {#each items as item, index}
+      <button
+        role="menuitem"
+        data-index={index}
+        tabindex={index === selectedIndex ? 0 : -1}
+        onclick={() => handleItemClick(item)}
+        disabled={item.disabled}
+        class="w-full text-left px-4 py-2 text-sm text-text hover:bg-base-3 transition-colors duration-200 flex items-center gap-2 {item.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+      >
+        {#if item.icon}
+          {@render item.icon()}
+        {/if}
+        {item.label}
+      </button>
+    {/each}
+  </div>
+{/if}