{
  "widgettype": "VBox",
  "options": {
    "width": "100%",
    "height": "100%",
    "padding": "20px"
  },
  "subwidgets": [
    {
      "widgettype": "Text",
      "options": {
        "text": "Connected Services",
        "fontSize": "24px",
        "fontWeight": "bold",
        "color": "#F8FAFC",
        "marginBottom": "20px"
      }
    },
    {
      "widgettype": "HBox",
      "options": {
        "width": "100%",
        "marginBottom": "20px",
        "alignItems": "center"
      },
      "subwidgets": [
        {
          "widgettype": "Input",
          "id": "service-search",
          "options": {
            "placeholder": "Search services...",
            "width": "300px",
            "icon": "fa fa-search"
          }
        },
        {
          "widgettype": "Filler"
        },
        {
          "widgettype": "Button",
          "options": {
            "icon": "fa fa-plus",
            "label": "Add Service",
            "bgcolor": "#22C55E",
            "color": "#FFFFFF",
            "border": "none",
            "borderRadius": "6px",
            "padding": "8px 16px"
          },
          "binds": [
            {
              "wid": "self",
              "event": "click",
              "actiontype": "urlwidget",
              "target": "app.main-content",
              "options": {
                "url": "{{entire_url('add_service.ui')}}"
              },
              "mode": "replace"
            }
          ]
        }
      ]
    },
    {
      "widgettype": "List",
      "id": "services-list",
      "options": {
        "width": "100%",
        "height": "calc(100% - 100px)",
        "itemHeight": "100px",
        "data_url": "/hermes-web-cli/services/list/"
      },
      "subwidgets": [
        {
          "widgettype": "VBox",
          "options": {
            "width": "100%",
            "height": "100%",
            "padding": "16px",
            "border": "1px solid #334155",
            "borderRadius": "8px",
            "bgcolor": "#1E293B"
          },
          "subwidgets": [
            {
              "widgettype": "HBox",
              "options": {
                "width": "100%",
                "alignItems": "center",
                "marginBottom": "8px"
              },
              "subwidgets": [
                {
                  "widgettype": "Text",
                  "options": {
                    "text": "{{item.name}}",
                    "fontSize": "18px",
                    "fontWeight": "600",
                    "color": "#F8FAFC"
                  }
                },
                {
                  "widgettype": "Filler"
                },
                {
                  "widgettype": "Badge",
                  "options": {
                    "text": "{{item.status}}",
                    "bgcolor": "{{ '#22C55E' if data.status == 'Connected' else '#EF4444' }}",
                    "color": "#FFFFFF",
                    "borderRadius": "12px",
                    "padding": "4px 12px",
                    "fontSize": "12px"
                  }
                }
              ]
            },
            {
              "widgettype": "Text",
              "options": {
                "text": "{{data.endpoint}}",
                "fontSize": "14px",
                "color": "#CBD5E1",
                "marginBottom": "8px"
              }
            },
            {
              "widgettype": "HBox",
              "options": {
                "width": "100%",
                "gap": "12px"
              },
              "subwidgets": [
                {
                  "widgettype": "Button",
                  "options": {
                    "label": "Edit",
                    "bgcolor": "#3B82F6",
                    "color": "#FFFFFF",
                    "border": "none",
                    "borderRadius": "4px",
                    "padding": "6px 12px",
                    "fontSize": "12px"
                  },
                      "binds": [
                        {
                          "wid": "self",
                          "event": "click",
                          "actiontype": "urlwidget",
                          "target": "app.main-content",
                          "options": {
                            "url": "{{entire_url('edit_service.ui?id={{data.id}}')}}"
                          },
                          "mode": "replace"
                        }
                      ]
                },
                {
                  "widgettype": "Button",
                  "options": {
                    "label": "Remove",
                    "bgcolor": "#EF4444",
                    "color": "#FFFFFF",
                    "border": "none",
                    "borderRadius": "4px",
                    "padding": "6px 12px",
                    "fontSize": "12px"
                  },
                      "binds": [
                        {
                          "wid": "self",
                          "event": "click",
                          "actiontype": "registerfunction",
                          "target": "self",
                          "rfname": "remove_service",
                          "params": {
                            "service_id": "{{data.id}}"
                          }
                        }
                      ]
                },
                {
                  "widgettype": "Button",
                  "options": {
                    "label": "Test Connection",
                    "bgcolor": "#8B5CF6",
                    "color": "#FFFFFF",
                    "border": "none",
                    "borderRadius": "4px",
                    "padding": "6px 12px",
                    "fontSize": "12px"
                  },
                      "binds": [
                        {
                          "wid": "self",
                          "event": "click",
                          "actiontype": "registerfunction",
                          "target": "self",
                          "rfname": "test_service_connection",
                          "params": {
                            "service_id": "{{data.id}}"
                          }
                        }
                      ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}