diff --git a/package-lock.json b/package-lock.json
index aab7e87d..3f242cdc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@codemirror/commands": "^6.10.0",
 				"@codemirror/lang-javascript": "^6.2.4",
+				"@codemirror/lang-json": "^6.0.2",
 				"@codemirror/lang-python": "^6.2.1",
 				"@codemirror/language": "^6.11.3",
 				"@codemirror/state": "^6.5.2",
@@ -133,9 +134,9 @@
 			}
 		},
 		"node_modules/@codemirror/lang-json": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
-			"integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+			"integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
 			"dependencies": {
 				"@codemirror/language": "^6.0.0",
 				"@lezer/json": "^1.0.0"
diff --git a/package.json b/package.json
index 222400ea..ecd73242 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
 	"dependencies": {
 		"@codemirror/commands": "^6.10.0",
 		"@codemirror/lang-javascript": "^6.2.4",
+		"@codemirror/lang-json": "^6.0.2",
 		"@codemirror/lang-python": "^6.2.1",
 		"@codemirror/language": "^6.11.3",
 		"@codemirror/state": "^6.5.2",
diff --git a/src/lib/common/shared/CodeScript.svelte b/src/lib/common/shared/CodeScript.svelte
index 4a1c42fe..a95851fc 100644
--- a/src/lib/common/shared/CodeScript.svelte
+++ b/src/lib/common/shared/CodeScript.svelte
@@ -1,7 +1,7 @@
 <script>
     import { onMount, createEventDispatcher } from "svelte";
     import CodeMirror from "svelte-codemirror-editor";
-    import { keymap } from "@codemirror/view";
+    import { keymap, lineNumbers } from "@codemirror/view";
     import { indentUnit, indentOnInput, indentService } from "@codemirror/language";
     import { defaultKeymap, history, indentWithTab, historyKeymap } from "@codemirror/commands";
     import { EditorState } from "@codemirror/state";
@@ -20,6 +20,15 @@
     /** @type {string} */
     export let containerClasses = '';
 
+    /** @type {boolean} */
+    export let useDarkTheme = true;
+
+    /** @type {boolean} */
+    export let hideLineNumber = false;
+
+    /** @type {boolean} */
+    export let editable = true;
+
 
     /** @type {import("@codemirror/state").Extension[]} */
     const baseExtensions = [
@@ -27,7 +36,7 @@
         EditorState.tabSize.of(4),
         indentOnInput(),
         history(),
-        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])
+        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
     ];
 
     /** @type {import("@codemirror/state").Extension[]} */
@@ -59,6 +68,17 @@
                 javascript(),
                 ...baseExtensions
             ];
+        } else {
+            extensions = [
+                ...baseExtensions
+            ];
+        }
+
+        if (hideLineNumber) {
+            extensions = [
+                lineNumbers({ formatNumber: () => "" }),
+                ...extensions
+            ];
         }
     });
 
@@ -73,8 +93,9 @@
 
 <CodeMirror
     class={`code-script-container ${containerClasses}`}
-    theme={oneDark}
     lineWrapping
+    theme={useDarkTheme ? oneDark : null}
+    editable={editable}
     extensions={extensions}
     value={scriptText}
     on:change={e => handleChange(e)}
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index c03bb81c..f5f52bdd 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -233,6 +233,9 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
         new RegExp('http(s*)://(.*?)/agent/tasks', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
+        new RegExp('http(s*)://(.*?)/rule/triggers', 'g'),
+        new RegExp('http(s*)://(.*?)/rule/criteria-providers', 'g'),
+        new RegExp('http(s*)://(.*?)/rule/actions', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/llm-configs', 'g'),
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index be941c2a..1caf3ed6 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -226,14 +226,30 @@
 /**
  * @typedef {Object} AgentRule
  * @property {string} trigger_name 
- * @property {string} criteria
  * @property {string?} [displayName]
  * @property {boolean} disabled
+ * @property {AgentRuleCriteria?} [rule_criteria]
+ * @property {AgentRuleAction?} [rule_action]
  * @property {any?} [output_args]
  * @property {string?} [json_args]
  * @property {string?} [statement]
  */
 
+/**
+ * @typedef {Object} AgentRuleCriteria
+ * @property {string?} [name]
+ * @property {string?} [criteria_text]
+ * @property {boolean} disabled
+ * @property {any} [config]
+ */
+
+/**
+ * @typedef {Object} AgentRuleAction
+ * @property {string?} [name]
+ * @property {boolean} disabled
+ * @property {any} [config]
+ */
+
 
 /**
  * @typedef {Object} AgentTaskSearchOption
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index 1117ffab..618a37bd 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -323,6 +323,11 @@
     }
 }
 
+.agent-rule-config {
+    min-height: 0px;
+    max-height: 200px;
+}
+
 .code-editor {
     max-height: 500px;
     overflow-y: auto;
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index caa9e172..a21c7c1d 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -115,6 +115,26 @@ export async function getAgentRuleOptions() {
     return response.data;
 }
 
+/**
+ * Get agent rule criteria providers
+ * @returns {Promise<string[]>}
+ */
+export async function getAgentRuleCriteriaProviders() {
+    const url = endpoints.agentRuleCriteriaProvidersUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
+/**
+ * Get agent rule actions
+ * @returns {Promise<string[]>}
+ */
+export async function getAgentRuleActions() {
+    const url = endpoints.agentRuleActionsUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
 /**
  * Get agent labels
  * @param {number?} [size]
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 38d18ac1..88aee7f2 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -40,6 +40,8 @@ export const endpoints = {
     agentCreateUrl: `${host}/agent`,
     agentUtilityOptionsUrl: `${host}/agent/utility/options`,
     agentRuleOptionsUrl: `${host}/rule/triggers`,
+    agentRuleCriteriaProvidersUrl: `${host}/rule/criteria-providers`,
+    agentRuleActionsUrl: `${host}/rule/actions`,
     agentLabelsUrl: `${host}/agent/labels`,
 
     // agent code script:
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index af113deb..11c7dfd0 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -1662,6 +1662,7 @@
 	<CodeScript
 		language={codeLanguage || 'python'}
 		scriptText={codeScript}
+		editable={false}
 	/>
 </PlainModal>
 
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index a93d2962..6b698758 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -2,11 +2,12 @@
     import { onMount } from 'svelte';
     import Swal from 'sweetalert2';
     import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
-	import { getAgentRuleOptions, generateAgentCodeScript } from '$lib/services/agent-service';
+    import { ADMIN_ROLES, AI_PROGRAMMER_AGENT_ID, RULE_TRIGGER_CODE_GENERATE_TEMPLATE } from '$lib/helpers/constants';
+    import { getAgentRuleOptions, generateAgentCodeScript, getAgentRuleActions, getAgentRuleCriteriaProviders } from '$lib/services/agent-service';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
 	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
-    import { ADMIN_ROLES, AI_PROGRAMMER_AGENT_ID, RULE_TRIGGER_CODE_GENERATE_TEMPLATE } from '$lib/helpers/constants';
+    import CodeScript from '$lib/common/shared/CodeScript.svelte';
 	import { AgentCodeScriptType } from '$lib/helpers/enums';
 	import { scrollToBottom } from '$lib/helpers/utils/common';
 
@@ -42,7 +43,8 @@
             return {
                 trigger_name: x.trigger_name,
                 disabled: x.disabled,
-                criteria: x.criteria?.trim()
+                rule_criteria: x.rule_criteria,
+                rule_action: x.rule_action 
             };
         });
 
@@ -63,6 +65,12 @@
     /** @type {any[]} */
     let ruleOptions = [];
 
+    /** @type {any[]} */
+    let criteriaOptions = [];
+
+    /** @type {any[]} */
+    let actionOptions = [];
+
     /** @type {import('$agentTypes').AgentRule[]} */
     let innerRules = [];
 
@@ -71,24 +79,35 @@
 
     onMount(async () =>{
         resizeWindow();
-        getAgentRuleOptions().then(data => {
-            const list = data?.map(x => {
-                return {
-                    name: x.trigger_name,
-                    displayName: "",
-                    output_args: x.output_args,
-                    json_args: x.json_args,
-                    statement: x.statement
-                };
-            }) || [];
-            ruleOptions = [{
-                name: "",
-                displayName: ""
-            }, ...list];
-            init();
-        });
+        Promise.all([
+            loadAgentRuleOptions(),
+            loadAgentRuleCriteriaProviders(),
+            loadAgentRuleActions()
+        ]);
     });
 
+    function loadAgentRuleOptions() {
+        return new Promise((resolve, reject) => {
+            getAgentRuleOptions().then(data => {
+                const list = data?.map(x => {
+                    return {
+                        name: x.trigger_name,
+                        displayName: "",
+                        output_args: x.output_args,
+                        json_args: x.json_args,
+                        statement: x.statement
+                    };
+                }) || [];
+                ruleOptions = [{
+                    name: "",
+                    displayName: ""
+                }, ...list];
+                init();
+                resolve('done');
+            });
+        });
+    }
+
     function init() {
         const list = agent.rules?.map(x => {
             return {
@@ -98,17 +117,56 @@
         }) || [];
         innerRefresh(list);
     }
+
+    function loadAgentRuleActions() {
+        return new Promise((resolve, reject) => {
+            getAgentRuleActions().then(data => {
+                const list = data?.map(x => ({ name: x })) || [];
+                actionOptions = [{
+                    name: ""
+                }, ...list];
+                resolve('done');
+            });
+        });
+    }
+
+    function loadAgentRuleCriteriaProviders() {
+        return new Promise((resolve, reject) => {
+            getAgentRuleCriteriaProviders().then(data => {
+                const list = data?.map(x => ({ name: x })) || [];
+                criteriaOptions = [{
+                    name: ""
+                }, ...list];
+                resolve('done');
+            });
+        });
+    }
     
     /**
 	 * @param {any} e
 	 * @param {number} idx
+     * @param {string} field
 	 */
-    function changeRule(e, idx) {
+    function changeRule(e, idx, field) {
         const found = innerRules.find((_, index) => index === idx);
         if (!found) return;
         
-        const val = e.target.value;
-        found.trigger_name = val;
+        if (field === 'rule') {
+            found.trigger_name = e.target.value;
+        } else if (field === 'criteria') {
+            found.rule_criteria = { 
+                ...found.rule_criteria || {},
+                name: e.target.value,
+                disabled: found.rule_criteria?.disabled || false
+            };
+        } else if (field === 'action') {
+            found.rule_action = {
+                ...found.rule_action || {},
+                name: e.target.value,
+                disabled: found.rule_action?.disabled || false
+            };
+        }
+
         innerRefresh(innerRules);
         handleAgentChange();
     }
@@ -118,7 +176,6 @@
             ...innerRules,
             {
                 trigger_name: '',
-                criteria: '',
                 displayName: '',
                 disabled: false
             }
@@ -136,12 +193,32 @@
     /**
      * @param {any} e
 	 * @param {number} uid
+     * @param {string} field
 	 */
-    function toggleRule(e, uid) {
+    function toggleRule(e, uid, field) {
         const found = innerRules.find((_, index) => index === uid);
         if (!found) return;
 
-        found.disabled = !e.target.checked;
+        if (field === 'rule') {
+            found.disabled = !e.target.checked;
+        } else if (field === 'criteria') {
+            if (!found.rule_criteria) {
+                found.rule_criteria = {
+                    name: '',
+                    disabled: false
+                };
+            }
+            found.rule_criteria.disabled = !e.target.checked;
+        } else if (field === 'action') {
+            if (!found.rule_action) {
+                found.rule_action = {
+                    name: '',
+                    disabled: false
+                };
+            }
+            found.rule_action.disabled = !e.target.checked;
+        }
+        
         innerRefresh(innerRules);
         handleAgentChange();
     }
@@ -155,18 +232,56 @@
         const found = innerRules.find((_, index) => index === uid);
         if (!found) return;
 
-        const val = e.target.value;
-        if (field === 'criteria') {
-            found.criteria = val;
+        if (field === 'criteria-text') {
+            if (found.rule_criteria == null) {
+                found.rule_criteria = {
+                    name: '',
+                    disabled: false,
+                    config: {}
+                };
+            }
+            found.rule_criteria.criteria_text = e.target.value;
+            innerRefresh(innerRules);
+            handleAgentChange();
+        } else if (field === 'criteria-config') {
+            if (found.rule_criteria == null) {
+                found.rule_criteria = {
+                    name: '',
+                    disabled: false,
+                    config: {}
+                };
+            }
+            try {
+                found.rule_criteria.config = JSON.parse(e.detail?.text || '{}');
+                handleAgentChange();
+            } catch {
+                // ignore invalid JSON while typing
+            }
+        } else if (field === 'action-config') {
+            if (found.rule_action == null) {
+                found.rule_action = {
+                    name: '',
+                    disabled: false,
+                    config: {}
+                };
+            }
+            try {
+                found.rule_action.config = JSON.parse(e.detail?.text || '{}');
+                handleAgentChange();
+            } catch {
+                // ignore invalid JSON while typing
+            }
         }
-        innerRefresh(innerRules);
-        handleAgentChange();
     }
 
     /**
 	 * @param {import("$agentTypes").AgentRule} rule
 	 */
     function compileCodeScript(rule) {
+        if (!!rule.rule_criteria?.disabled) {
+            return;
+        }
+
         Swal.fire({
             title: 'Are you sure?',
             html: `
@@ -202,7 +317,7 @@
                     script_type: AgentCodeScriptType.Src,
                     data: {
                         'args_example': { ...rule.output_args },
-                        'user_request': rule.criteria
+                        'user_request': rule.rule_criteria?.criteria_text
                     }
                 }
             }).then(res => {
@@ -292,7 +407,7 @@
                                     <Input
                                         type="checkbox"
                                         checked={!rule.disabled}
-                                        on:change={e => toggleRule(e, uid)}
+                                        on:change={e => toggleRule(e, uid, 'rule')}
                                     />
                                 </div>
                                 {#if rule.statement}
@@ -329,7 +444,7 @@
                                 <Input
                                     type="select"
                                     disabled={rule.disabled}
-                                    on:change={e => changeRule(e, uid)}
+                                    on:change={e => changeRule(e, uid, 'rule')}
                                 >
                                     {#each [...ruleOptions] as option}
                                         <option value={option.name} selected={option.name == rule.trigger_name}>
@@ -358,7 +473,39 @@
                                         <div class="line-align-center">
                                             {'Criteria'}
                                         </div>
-                                        {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && !!rule.criteria?.trim()}
+                                        <div class="line-align-center">
+                                            <Input
+                                                type="checkbox"
+                                                checked={!rule.rule_criteria?.disabled}
+                                                on:change={e => toggleRule(e, uid, 'criteria')}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="utility-value">
+                                    <div class="utility-input line-align-center">
+                                        <Input
+                                            type="select"
+                                            disabled={!!rule.rule_criteria?.disabled}
+                                            on:change={e => changeRule(e, uid, 'criteria')}
+                                        >
+                                            {#each [...criteriaOptions] as option}
+                                                <option value={option.name} selected={option.name == rule.rule_criteria?.name}>
+                                                    {option.name}
+                                                </option>
+                                            {/each}
+                                        </Input>
+                                    </div>
+                                    <div class="utility-delete line-align-center"></div>
+                                </div>
+                            </div>
+                            <div class="utility-list-item">
+                                <div class="utility-label line-align-center">
+                                    <div class="d-flex gap-1">
+                                        <div class="line-align-center">
+                                            {'Text'}
+                                        </div>
+                                        {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && !!rule.rule_criteria?.criteria_text?.trim()}
                                         <div
                                             class="line-align-center clickable text-primary fs-5"
                                             style="padding-top: 3px;"
@@ -383,42 +530,127 @@
                                             type="textarea"
                                             style="resize: none;"
                                             rows={5}
-                                            disabled={rule.disabled}
+                                            disabled={!!rule.rule_criteria?.disabled}
                                             maxlength={textLimit}
-                                            value={rule.criteria}
-                                            on:input={e => changeContent(e, uid, 'criteria')}
+                                            value={rule.rule_criteria?.criteria_text}
+                                            on:input={e => changeContent(e, uid, 'criteria-text')}
                                         />
                                     </div>
                                     <div class="utility-delete line-align-center">
                                         {#if rule.json_args}
-                                            <div class="line-align-center">
-                                                <i
-                                                    class="bx bxs-info-circle text-primary fs-5"
-                                                    id={`rule-args-${uid}`}
-                                                    data-bs-toggle="tooltip"
-                                                    data-bs-placement="top"
-                                                    title="Rule arguments"
+                                        <div class="line-align-center">
+                                            <i
+                                                class="bx bxs-info-circle text-primary fs-5"
+                                                id={`rule-args-${uid}`}
+                                                data-bs-toggle="tooltip"
+                                                data-bs-placement="top"
+                                                title="Rule arguments"
+                                            />
+                                            <BotsharpTooltip
+                                                containerClasses="agent-utility-desc"
+                                                style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
+                                                target={`rule-args-${uid}`}
+                                                placement="right"
+                                                persist
+                                            >
+                                                <Markdown
+                                                    rawText
+                                                    scrollable
+                                                    containerClasses={'markdown-div'}
+                                                    containerStyles={`max-width: ${Math.floor(windowWidth*0.3)}px;`}
+                                                    text={rule.json_args}
                                                 />
-                                                <BotsharpTooltip
-                                                    containerClasses="agent-utility-desc"
-                                                    style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
-                                                    target={`rule-args-${uid}`}
-                                                    placement="right"
-                                                    persist
-                                                >
-                                                    <Markdown
-                                                        rawText
-                                                        scrollable
-                                                        containerClasses={'markdown-div'}
-                                                        containerStyles={`max-width: ${Math.floor(windowWidth*0.3)}px;`}
-                                                        text={rule.json_args}
-                                                    />
-                                                </BotsharpTooltip>
-                                            </div>
+                                            </BotsharpTooltip>
+                                        </div>
                                         {/if}
                                     </div>
                                 </div>
                             </div>
+                            {#if rule.rule_criteria?.name}
+                            <div class="utility-list-item">
+                                <div class="utility-label line-align-center">
+                                    <div class="d-flex gap-1">
+                                        <div class="line-align-center">
+                                            {'Config'}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="utility-value">
+                                    <div class="utility-input line-align-center">
+                                        <CodeScript
+                                            language="json"
+                                            containerClasses="agent-rule-config"
+                                            hideLineNumber={true}
+                                            editable={!rule.rule_criteria?.disabled}
+                                            scriptText={JSON.stringify(rule.rule_criteria?.config || {}, null, 2)}
+                                            on:change={(e) => changeContent(e, uid, 'criteria-config')}
+                                        />
+                                    </div>
+                                    <div class="utility-delete line-align-center"></div>
+                                </div>
+                            </div>
+                            {/if}
+                        </div>
+                    </div>
+
+                    <div class="utility-row utility-row-secondary">
+                        <div class="utility-content">
+                            <div class="utility-list-item">
+                                <div class="utility-label line-align-center">
+                                    <div class="d-flex gap-1">
+                                        <div class="line-align-center">
+                                            {'Action'}
+                                        </div>
+                                        <div class="line-align-center">
+                                            <Input
+                                                type="checkbox"
+                                                checked={!rule.rule_action?.disabled}
+                                                on:change={e => toggleRule(e, uid, 'action')}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="utility-value">
+                                    <div class="utility-input line-align-center">
+                                        <Input
+                                            type="select"
+                                            disabled={!!rule.rule_action?.disabled}
+                                            on:change={e => changeRule(e, uid, 'action')}
+                                        >
+                                            {#each [...actionOptions] as option}
+                                                <option value={option.name} selected={option.name == rule.rule_action?.name}>
+                                                    {option.name}
+                                                </option>
+                                            {/each}
+                                        </Input>
+                                    </div>
+                                    <div class="utility-delete line-align-center"></div>
+                                </div>
+                            </div>
+                            {#if rule.rule_action?.name}
+                            <div class="utility-list-item">
+                                <div class="utility-label line-align-center">
+                                    <div class="d-flex gap-1">
+                                        <div class="line-align-center">
+                                            {'Config'}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="utility-value">
+                                    <div class="utility-input line-align-center">
+                                        <CodeScript
+                                            language="json"
+                                            containerClasses="agent-rule-config"
+                                            hideLineNumber={true}
+                                            editable={!rule.rule_action?.disabled}
+                                            scriptText={JSON.stringify(rule.rule_action?.config || {}, null, 2)}
+                                            on:change={(e) => changeContent(e, uid, 'action-config')}
+                                        />
+                                    </div>
+                                    <div class="utility-delete line-align-center"></div>
+                                </div>
+                            </div>
+                            {/if}
                         </div>
                     </div>
                 </div>