{
  "widgettype": "VBox",
  "options": {
    "width": "100%",
    "height": "100%",
    "padding": "20px"
  },
  "subwidgets": [
    {
      "widgettype": "Text",
      "options": {
        "text": "Settings",
        "fontSize": "24px",
        "fontWeight": "bold",
        "color": "#F8FAFC",
        "marginBottom": "20px"
      }
    },
    {% set current_user = get_user() %}
    {% set settings_data = get_setting(current_user) %}
    {
      "widgettype": "TabPanel",
      "id": "settings-tabs",
      "options": {
        "width": "100%",
        "height": "calc(100% - 60px)",
        "tab_pos": "top",
        "items": [
          {
            "name": "general",
            "label": "General",
            "content": {
              "widgettype": "VBox",
              "options": {
                "width": "100%",
                "height": "100%",
                "padding": "20px"
              },
              "subwidgets": [
                {
                  "widgettype": "Form",
                  "id": "general-settings-form",
                  "options": {
                    "width": "100%",
                    "maxWidth": "600px",
                    "fields": [
                      {
                        "uitype": "code",
                        "name": "default-model",
                        "label": "Default AI Model",
                        "placeholder": "Select default model...",
                        "value": "{{ settings_data.general.default_model if settings_data.general.default_model else '' }}",
                        "width": "100%",
                        "marginBottom": "16px"
                      },
                      {
                        "uitype": "int",
                        "name": "session-timeout",
                        "label": "Session Timeout (minutes)",
                        "placeholder": "Enter timeout in minutes...",
                        "value": "{{ settings_data.general.session_timeout if settings_data.general.session_timeout else 30 }}",
                        "width": "100%",
                        "marginBottom": "16px"
                      },
                      {
                        "uitype": "check",
                        "name": "auto-save",
                        "label": "Auto-save sessions",
                        "checked": "{{ settings_data.general.auto_save if 'auto_save' in settings_data.general else true }}",
                        "marginBottom": "24px"
                      }
                    ],
                    "toolbar": {
                      "tools": [
                        {
                          "label": "Save General Settings",
                          "bgcolor": "#22C55E",
                          "color": "#FFFFFF",
                          "border": "none",
                          "borderRadius": "6px",
                          "padding": "10px 20px",
                          "fontWeight": "600",
                          "action": "save_general_settings"
                        }
                      ]
                    }
                  },
                  "binds": [
                    {
                      "wid": "self",
                      "event": "save_general_settings",
                      "actiontype": "registerfunction",
                      "target": "app.settings-tabs",
                      "rfname": "save_general_settings",
                      "params": {
                        "form_data": "{{ 'general-settings-form'.data }}"
                      }
                    }
                  ]
                }
              ]
            }
          },
          {
            "name": "models",
            "label": "AI Models",
            "content": {
              "widgettype": "VBox",
              "options": {
                "width": "100%",
                "height": "100%",
                "padding": "20px"
              },
              "subwidgets": [
                {
                  "widgettype": "Text",
                  "options": {
                    "text": "Configure AI Models",
                    "fontSize": "18px",
                    "fontWeight": "600",
                    "color": "#F8FAFC",
                    "marginBottom": "16px"
                  }
                },
                {
                  "widgettype": "List",
                  "id": "models-list",
                  "options": {
                    "width": "100%",
                    "height": "calc(100% - 80px)",
                    "itemHeight": "120px",
                    "data_url": "/hermes-web-cli/models/list/",
                    "item_template_url": "{{entire_url('model-list-item.ui')}}"
                  }
                },
                {
                  "widgettype": "Button",
                  "options": {
                    "label": "Add New Model",
                    "bgcolor": "#22C55E",
                    "color": "#FFFFFF",
                    "border": "none",
                    "borderRadius": "6px",
                    "padding": "8px 16px",
                    "marginTop": "12px"
                  },
                  "binds": [
                    {
                      "wid": "self",
                      "event": "click",
                      "actiontype": "registerfunction",
                      "target": "app.settings-tabs",
                      "rfname": "add_model",
                      "params": {}
                    }
                  ]
                }
              ]
            }
          },
          {
            "name": "security",
            "label": "Security",
            "content": {
              "widgettype": "Form",
              "id": "security-settings-form",
              "options": {
                "width": "100%",
                "maxWidth": "600px",
                "fields": [
                  {
                    "uitype": "check",
                    "name": "require-auth",
                    "label": "Require authentication for API access",
                    "checked": "{{ settings_data.security.require_auth if 'require_auth' in settings_data.security else false }}",
                    "marginBottom": "12px"
                  },
                  {
                    "uitype": "check",
                    "name": "encrypt-storage",
                    "label": "Encrypt local storage",
                    "checked": "{{ settings_data.security.encrypt_storage if 'encrypt_storage' in settings_data.security else false }}",
                    "marginBottom": "24px"
                  }
                ],
                "toolbar": {
                  "tools": [
                    {
                      "label": "Save Security Settings",
                      "bgcolor": "#22C55E",
                      "color": "#FFFFFF",
                      "border": "none",
                      "borderRadius": "6px",
                      "padding": "10px 20px",
                      "fontWeight": "600",
                      "action": "save_security_settings"
                    }
                  ]
                }
              },
              "binds": [
                {
                  "wid": "self",
                  "event": "save_security_settings",
                  "actiontype": "registerfunction",
                  "target": "app.settings-tabs",
                  "rfname": "save_security_settings",
                  "params": {
                    "require_auth": "{{ 'security-settings-form'.data['require-auth'] }}",
                    "encrypt_storage": "{{ 'security-settings-form'.data['encrypt-storage'] }}"
                  }
                }
              ]
            }
          },
          {
            "name": "appearance",
            "label": "Appearance",
            "content": {
              "widgettype": "Form",
              "id": "appearance-settings-form",
              "options": {
                "width": "100%",
                "maxWidth": "600px",
                "fields": [
                  {
                    "uitype": "select",
                    "name": "theme",
                    "label": "Theme",
                    "items": [
                      {"label": "Dark", "value": "dark"},
                      {"label": "Light", "value": "light"},
                      {"label": "System", "value": "system"}
                    ],
                    "value": "{{ settings_data.appearance.theme if settings_data.appearance.theme else 'dark' }}",
                    "width": "200px",
                    "marginBottom": "24px"
                  }
                ],
                "toolbar": {
                  "tools": [
                    {
                      "label": "Save Appearance Settings",
                      "bgcolor": "#22C55E",
                      "color": "#FFFFFF",
                      "border": "none",
                      "borderRadius": "6px",
                      "padding": "10px 20px",
                      "fontWeight": "600",
                      "action": "save_appearance_settings"
                    }
                  ]
                }
              },
              "binds": [
                {
                  "wid": "self",
                  "event": "save_appearance_settings",
                  "actiontype": "registerfunction",
                  "target": "app.settings-tabs",
                  "rfname": "save_appearance_settings",
                  "params": {
                    "theme": "{{ 'appearance-settings-form'.data.theme }}"
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}