windmill-components 1.28.7 → 1.35.1

package/common.d.ts

@@ -12,6 +12,9 @@ export interface SchemaProperty {
         type?: 'string' | 'number' | 'bytes';
         contentEncoding?: 'base64';
     };
+    properties?: {
+        [name: string]: SchemaProperty;
+    };
 }
 export declare type Schema = {
     $schema: string;

package/components/AppConnect.svelte

@@ -149,6 +149,13 @@ async function back() {
     }
 }
 const dispatch = createEventDispatcher();
+$: isGoogleSignin =
+    step == 1 &&
+        (resource_type == 'google' ||
+            resource_type == 'gmail' ||
+            resource_type == 'gcal' ||
+            resource_type == 'gdrive' ||
+            resource_type == 'gsheets');
 </script>
 
 <Modal
@@ -161,20 +168,21 @@ const dispatch = createEventDispatcher();
 		loadResources()
 	}}
 >
-	<div slot="title">Connect an App</div>
+	<div slot="title">Connect an API</div>
 	<div slot="content">
 		{#if step == 1}
 			{#if resource_type && !connects[resource_type] && !connectsManual.find((x) => x[0] == resource_type)}
 				<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
-					<p class="font-bold">No app integration for {resource_type}</p>
+					<p class="font-bold">No API integration for {resource_type}</p>
 					<p>
-						The resource type "{resource_type}" seems to not have an app integration. You can still
-						create this resource manually by closing this modal and pressing: "Add a resource". You
-						can also contribute to windmill and add it as an app integration if relevant.
+						The resource type "{resource_type}" seems to not have an OAuth API integration. You can
+						still create this resource manually by closing this modal and pressing: "Add a
+						resource". You can also contribute to windmill and add it as an API integration if
+						relevant.
 					</p>
 				</div>
 			{/if}
-			<PageHeader title="OAuth apps" />
+			<PageHeader title="OAuth APIs" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) as [key, values]}
 					<button
@@ -213,11 +221,11 @@ const dispatch = createEventDispatcher();
 				><span class="ml-2">{(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''}</span
 				>
 			{:else}
-				<p class="italic text-sm">Pick an OAuth app and customize the scopes here</p>
+				<p class="italic text-sm">Pick an OAuth API and customize the scopes here</p>
 			{/if}
 			<PageHeader title="Extra Params" primary={false} />
 			{#if !manual && resource_type != ''}
-				{#each extra_params as [k, v], i}
+				{#each extra_params as [k, v]}
 					<div class="flex flex-row max-w-md">
 						<input type="text" bind:value={k} />
 						<input type="text" bind:value={v} />
@@ -240,9 +248,9 @@ const dispatch = createEventDispatcher();
 					>{(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''}</span
 				>
 			{:else}
-				<p class="italic text-sm">Pick an OAuth app and customize the extra parameters here</p>
+				<p class="italic text-sm">Pick an OAuth API and customize the extra parameters here</p>
 			{/if}
-			<PageHeader title="Non OAuth apps" />
+			<PageHeader title="Non OAuth APIs" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each connectsManual as [key, instructions]}
 					<button
@@ -297,7 +305,7 @@ const dispatch = createEventDispatcher();
 					<span class="font-mono">`$var:${path}`</span>). You can refer to this resource anywhere
 					this token is required. A script can use the resource type
 					<span class="font-mono">{resource_type}</span> as a type parameter to restrict the kind of
-					tokens it accepts to this app.
+					tokens it accepts to this api.
 				</li>
 			</ul>
 		{/if}
@@ -307,13 +315,21 @@ const dispatch = createEventDispatcher();
 			<button class="default-button px-4 py-2 font-semibold" on:click={back}>Back</button>
 		{/if}
 		<button
-			class="default-button px-4 py-2 font-semibold"
+			class={isGoogleSignin ? '' : 'default-button px-4 py-2 font-semibold'}
 			class:default-button-disabled={(step == 1 && resource_type == '') ||
 				(step == 2 && value == '') ||
 				(step == 3 && pathError != '')}
 			on:click={next}
 		>
-			{step == 3 ? 'Connect' : 'Next'}
+			{#if isGoogleSignin}
+				<img src="/google_signin.png" alt="Google sign-in" />
+			{:else if step == 1 && !manual}
+				Connect
+			{:else if step == 3}
+				Add resource
+			{:else}
+				Next
+			{/if}
 		</button>
 	</div>
 </Modal>

package/components/ArgInput.svelte

@@ -10,6 +10,7 @@ import ObjectResourceInput from './ObjectResourceInput.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
+import SchemaForm from './SchemaForm.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -27,6 +28,7 @@ export let disabled = false;
 export let editableSchema = false;
 export let itemsType = undefined;
 export let displayHeader = true;
+export let properties = undefined;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 $: minHeight = `${1 + minRows * 1.2}em`;
@@ -55,10 +57,10 @@ $: {
     defaultValue && recomputeRowSize(JSON.stringify(defaultValue, null, 4));
 }
 function recomputeRowSize(str) {
-    if (str.length > 50) {
-        minRows = 3;
+    if (type == 'string') {
+        minRows = str.split('\n').length;
     }
-    if (type != 'string') {
+    else if (type != 'string') {
         minRows = Math.max(minRows, Math.min(str.split(/\r\n|\r|\n/).length + 1, maxRows));
     }
 }
@@ -244,16 +246,25 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'resource-object'}
 				<ObjectResourceInput {format} bind:value />
 			{:else if inputCat == 'object'}
-				<textarea
-					{disabled}
-					style="min-height: {minHeight}; max-height: {maxHeight}"
-					on:input={async () => recomputeRowSize(rawValue ?? '')}
-					class="col-span-10 {valid
-						? ''
-						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
-					placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
-					bind:value={rawValue}
-				/>
+				{#if properties && Object.keys(properties).length > 0}
+					<div class="p-4 pl-8 border rounded w-full">
+						<SchemaForm
+							schema={{ properties, $schema: '', required: [], type: 'object' }}
+							bind:args={value}
+						/>
+					</div>
+				{:else}
+					<textarea
+						{disabled}
+						style="min-height: {minHeight}; max-height: {maxHeight}"
+						on:input={async () => recomputeRowSize(rawValue ?? '')}
+						class="col-span-10 {valid
+							? ''
+							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+						placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
+						bind:value={rawValue}
+					/>
+				{/if}
 			{:else if inputCat == 'enum'}
 				<select {disabled} class="px-6" bind:value>
 					{#each enum_ ?? [] as e}
@@ -270,7 +281,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						bind:this={editor}
 						lang="sql"
 						bind:code={value}
-						class="two-lines-editor"
+						class="few-lines-editor"
 						on:change={async () => {
 							dispatch('input', { rawValue: value, isRaw: false })
 						}}

package/components/ArgInput.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type InputCat } from '../utils';
 import Editor from './Editor.svelte';
+import type { SchemaProperty } from '../common';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -23,6 +24,9 @@ declare const __propDef: {
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
+        properties?: {
+            [name: string]: SchemaProperty;
+        } | undefined;
         editor?: Editor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         inputCat?: InputCat | undefined;

package/components/CenteredPage.svelte

@@ -1,5 +1,5 @@
-<div class="max-w-screen-lg flex grow w-full h-full xl:-ml-20">
-	<div class="grow w-full h-full mt-4">
+<div class="py-6">
+	<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
 		<slot />
 	</div>
 </div>

package/components/DisplayResult.svelte

@@ -49,7 +49,7 @@ function inferResultKind(result) {
 
 {#if result}
 	{#if typeof result == 'object' && Object.keys(result).length > 0}<div>
-			The result keys are: <b>{Object.keys(result).join(', ')}</b>
+			The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
 		</div>
 	{/if}
 	{#if resultKind == 'table-col'}
@@ -74,10 +74,10 @@ function inferResultKind(result) {
 		>
 			<TableCustom>
 				<tbody slot="body">
-					{#each asListOfList(Object.values(result)[0]) as row}
+					{#each asListOfList(result) as row}
 						<tr>
 							{#each row as v}
-								<td>{truncate(v, 200) ?? ''}</td>
+								<td>{truncate(JSON.stringify(v), 200) ?? ''}</td>
 							{/each}
 						</tr>
 					{/each}

package/components/Editor.svelte

@@ -1,32 +1,24 @@
 <script context="module">import * as monaco from 'monaco-editor';
-import { language as sql } from 'monaco-editor/esm/vs/basic-languages/sql/sql';
-monaco.languages.register({
-    id: 'python',
-    extensions: ['.py'],
-    aliases: ['python'],
-    mimetypes: ['application/text']
+monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
 });
-monaco.languages.register({
-    id: 'sql',
-    extensions: ['.sql'],
-    aliases: ['SQL'],
-    mimetypes: ['application/text']
+monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
 });
-monaco.languages.registerInlineCompletionsProvider('sql', {
-    provideInlineCompletions: (a, b, c, d) => {
-        const w = a.getWordUntilPosition(b).word.toLowerCase();
-        return {
-            items: w.length > 0
-                ? ['SELECT', 'FROM', 'WHILE', 'AND', 'OR', 'DELETE', 'UPDATE', 'SET', 'WHEN', 'LIMIT']
-                    .concat(sql.keywords)
-                    .filter((x) => x.toLowerCase().startsWith(w))
-                    .map((x) => ({
-                    text: x + ' '
-                }))
-                : []
-        };
-    },
-    freeInlineCompletions: () => { }
+monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: true,
+    noSuggestionDiagnostics: true,
+    noSyntaxValidation: true
+});
+monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+    validate: true,
+    allowComments: false,
+    schemas: [],
+    enableSchemaRequest: true
 });
 </script>
 
@@ -36,10 +28,11 @@ import { sendUserToast } from '../utils';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
-import { StandaloneServices } from 'vscode/services';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import getMessageServiceOverride from 'vscode/service-override/messages';
+import { StandaloneServices } from 'vscode/services';
+import { DENO_INIT_CODE_CLEAR, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 StandaloneServices.initialize({
     ...getMessageServiceOverride(document.body)
 });
@@ -55,6 +48,7 @@ export let automaticLayout = true;
 export let websocketAlive = { pyright: false, black: false, deno: false };
 export let extraLib = '';
 export let extraLibPath = '';
+export let shouldBindKey = true;
 let websockets = [];
 let websocketInterval;
 let lastWsAttempt = new Date();
@@ -84,7 +78,7 @@ if (browser) {
     }
 }
 export function getCode() {
-    return editor?.getValue();
+    return editor?.getValue() ?? '';
 }
 export function insertAtCursor(code) {
     if (editor) {
@@ -115,21 +109,33 @@ export function insertAtBeginning(code) {
     }
 }
 export function setCode(ncode) {
+    code = ncode;
     if (editor) {
-        return editor.setValue(ncode);
-    }
-    else {
-        code = ncode;
+        editor.setValue(ncode);
     }
 }
 function format() {
     if (editor) {
+        code = getCode();
         editor.getAction('editor.action.formatDocument').run();
         if (formatAction) {
             formatAction();
         }
     }
 }
+export async function clearContent() {
+    if (editor) {
+        if (lang == 'typescript') {
+            setCode(DENO_INIT_CODE_CLEAR);
+        }
+        else if (lang == 'python') {
+            setCode(PYTHON_INIT_CODE_CLEAR);
+        }
+        else {
+            setCode('');
+        }
+    }
+}
 let command = undefined;
 let monacoServices = undefined;
 export async function reloadWebsocket() {
@@ -286,9 +292,10 @@ export async function reloadWebsocket() {
         }
         websocketInterval && clearInterval(websocketInterval);
         websocketInterval = setInterval(() => {
+            console.log(websocketInterval, document.visibilityState, new Date().getTime() - lastWsAttempt.getTime(), nbWsAttempt);
             if (document.visibilityState == 'visible') {
                 if (!lastWsAttempt ||
-                    (lastWsAttempt.getTime() - new Date().getTime() > 60000 && nbWsAttempt < 2)) {
+                    (new Date().getTime() - lastWsAttempt.getTime() > 60000 && nbWsAttempt < 2)) {
                     if (!websocketAlive.black && !websocketAlive.deno && !websocketAlive.pyright) {
                         console.log('reconnecting to language servers');
                         lastWsAttempt = new Date();
@@ -351,60 +358,45 @@ async function loadMonaco() {
             enabled: true
         }
     });
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
-        format();
-    });
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
-        if (cmdEnterAction) {
-            cmdEnterAction();
-        }
-    });
+    if (shouldBindKey) {
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+            format();
+        });
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+            if (cmdEnterAction) {
+                cmdEnterAction();
+            }
+        });
+    }
+    let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
-        code = getCode();
+        timeoutModel && clearTimeout(timeoutModel);
+        timeoutModel = setTimeout(() => {
+            code = getCode();
+        }, 500);
         dispatch('change');
     });
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
+        if (deno || lang == 'typescript') {
+            if (!websocketAlive.black &&
+                !websocketAlive.deno &&
+                !websocketAlive.pyright &&
+                !websocketInterval) {
+                reloadWebsocket();
+            }
+        }
     });
     editor.onDidBlurEditorText(() => {
         dispatch('blur');
     });
-    if (lang == 'sql') {
-        monaco.languages.register;
-    }
-    else if (lang == 'json') {
-        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-            validate: true,
-            allowComments: false,
-            schemas: [],
-            enableSchemaRequest: true
-        });
-    }
-    else if (lang == 'javascript' || lang == 'typescript') {
-        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-            target: monaco.languages.typescript.ScriptTarget.Latest,
-            allowNonTsExtensions: true,
-            noLib: true
-        });
-        if (lang == 'typescript') {
-            monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-                target: monaco.languages.typescript.ScriptTarget.Latest,
-                allowNonTsExtensions: true,
-                noLib: true
-            });
-            if (deno) {
-                monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-                    noSemanticValidation: true,
-                    noSuggestionDiagnostics: true,
-                    noSyntaxValidation: true
-                });
-            }
-        }
-        if (lang == 'javascript') {
-            if (extraLib != '' && extraLibPath != '') {
-                monaco.languages.typescript.javascriptDefaults.addExtraLib(extraLib, extraLibPath);
+    if (lang == 'javascript' && extraLib != '' && extraLibPath != '') {
+        monaco.languages.typescript.javascriptDefaults.setExtraLibs([
+            {
+                content: extraLib,
+                filePath: extraLibPath
             }
-        }
+        ]);
     }
     if (lang == 'python' || deno) {
         reloadWebsocket();

package/components/Editor.svelte.d.ts

@@ -16,10 +16,12 @@ declare const __propDef: {
         } | undefined;
         extraLib?: string | undefined;
         extraLibPath?: string | undefined;
+        shouldBindKey?: boolean | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         insertAtBeginning?: ((code: string) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;
+        clearContent?: (() => Promise<void>) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
     };
     events: {
@@ -39,6 +41,7 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get insertAtCursor(): (code: string) => void;
     get insertAtBeginning(): (code: string) => void;
     get setCode(): (ncode: string) => void;
+    get clearContent(): () => Promise<void>;
     get reloadWebsocket(): () => Promise<void>;
 }
 export {};

package/components/EditorBar.svelte

@@ -1,9 +1,8 @@
 <script>import { ResourceService, ScriptService, VariableService } from '../gen';
 import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faCube, faFile, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { hubScripts, workspaceStore } from '../stores';
-import { Button } from 'flowbite-svelte';
 import { Highlight } from 'svelte-highlight';
 import { python, typescript } from 'svelte-highlight/languages';
 import ItemPicker from './ItemPicker.svelte';
@@ -84,7 +83,7 @@ async function loadScripts() {
 			if (lang == 'deno') {
 				if (!editor.getCode().includes('import * as wmill from')) {
 					editor.insertAtBeginning(
-						`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/index.ts'\n`
+						`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/mod.ts'\n`
 					)
 				}
 				editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
@@ -123,7 +122,7 @@ async function loadScripts() {
 		if (lang == 'deno') {
 			if (!editor.getCode().includes('import * as wmill from')) {
 				editor.insertAtBeginning(
-					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/index.ts'\n`
+					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/mod.ts'\n`
 				)
 			}
 			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
@@ -157,59 +156,79 @@ async function loadScripts() {
 </ItemPicker>
 
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
-
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
 
-<div class="flex flex-row w-full">
-	<div class="flex flex-row w-full space-x-2 whitespace-nowrap">
-		<Button
-			size="xs"
-			color="alternative"
+<div class="flex divide-x items-center">
+	<div>
+		<button
+			type="button"
+			class="mr-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
 			on:click={() => {
 				variablePicker.openModal()
 			}}
 		>
-			<Icon data={faSearch} scale={0.7} class="mr-2" />
-			Variable picker
-		</Button>
-
-		<Button
-			size="xs"
-			color="alternative"
+			<Icon data={faFile} class="h-4 w-4 mr-2" />
+			Insert variable
+		</button>
+	</div>
+	<div>
+		<button
+			type="button"
+			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
 			on:click={() => {
 				resourcePicker.openModal()
 			}}
 		>
-			<Icon data={faSearch} scale={0.7} class="mr-2" />
-			Resource picker
-		</Button>
+			<Icon data={faCube} class="h-4 w-4 mr-2" />
+			Insert resource
+		</button>
+	</div>
 
-		<Button
-			size="xs"
-			color="alternative"
+	<div>
+		<button
+			type="button"
+			class="mx-1  bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
 			on:click={() => {
 				scriptPicker.openModal()
 			}}
 		>
-			<Icon data={faSearch} scale={0.7} class="mr-2" />
-			Script explorer
-		</Button>
+			<Icon data={faCode} class="h-4 w-4 mr-2" />
+			Search script
+		</button>
 	</div>
-	<div class="flex flex-row-reverse w-full">
-		<Button
-			size="xs"
-			color="alternative"
+
+	<div>
+		<button
+			type="button"
+			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
+			on:click={() => {
+				editor.clearContent()
+			}}
+		>
+			<Icon data={faRotateLeft} class="h-4 w-4 mr-2" />
+			Reset content
+		</button>
+	</div>
+	<div>
+		<button
+			type="button"
+			class="ml-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
 			on:click={() => {
 				editor.reloadWebsocket()
 			}}
 		>
-			Reload assistants (status:&nbsp;
-			{#if lang == 'deno'}
-				<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-600'}>Deno</span>
-			{:else if lang == 'python3'}
-				<span class={websocketAlive.pyright ? 'text-green-600' : 'text-red-600'}>Pyright</span>
-				<span class={websocketAlive.black ? 'text-green-600' : 'text-red-600'}>Black</span>
-			{/if})
-		</Button>
+			<Icon data={faRotate} class="h-4 w-4 mr-2" />
+
+			Reload assistants
+			<span class="ml-1">
+				{#if lang == 'deno'}
+					(<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-700'}>Deno</span>)
+				{:else if lang == 'python3'}
+					(<span class={websocketAlive.pyright ? 'text-green-600' : 'text-red-700'}>Pyright</span>
+					&nbsp;
+					<span class={websocketAlive.black ? 'text-green-600' : 'text-red-700'}>Black</span>)
+				{/if}
+			</span>
+		</button>
 	</div>
 </div>