{
  "widgettype": "VBox",
  "options": {
    "width": "100%",
    "height": "100%",
    "padding": "20px"
  },
  "subwidgets": [
    {
      "widgettype": "Text",
      "options": {
        "text": "Hermes Services",
        "fontSize": "24px",
        "fontWeight": "bold",
        "marginBottom": "20px",
        "color": "#F8FAFC"
      }
    },
    {
      "widgettype": "Button",
      "options": {
        "text": "Add New Service",
        "icon": "fa fa-plus",
        "backgroundColor": "#22C55E",
        "color": "#FFFFFF",
        "border": "none",
        "borderRadius": "6px",
        "padding": "10px 20px",
        "marginBottom": "20px"
      },
      "binds": [
        {
          "wid": "self",
          "event": "click",
          "actiontype": "urlwidget",
          "target": "main-content",
          "options": {
            "url": "{{entire_url('add_service.ui')}}"
          },
          "mode": "replace"
        }
      ]
    },
    {
      "widgettype": "DataViewer",
      "options": {
        "data_url": "/hermes-web-cli/services",
        "page_rows": 10,
        "row_options": {
          "fields": [
            {
              "name": "id",
              "label": "Service ID",
              "uitype": "str"
            },
            {
              "name": "name",
              "label": "Name",
              "uitype": "str"
            },
            {
              "name": "service_url",
              "label": "URL",
              "uitype": "str"
            },
            {
              "name": "description",
              "label": "Description",
              "uitype": "str"
            },
            {
              "name": "status",
              "label": "Status",
              "uitype": "str"
            },
            {
              "name": "created_at",
              "label": "Created",
              "uitype": "date"
            }
          ]
        },
        "toolbar": {
          "tools": [
            {
              "name": "test_connection",
              "text": "Test Connection",
              "icon": "fa fa-plug"
            },
            {
              "name": "edit_service",
              "text": "Edit",
              "icon": "fa fa-edit"
            },
            {
              "name": "delete_service",
              "text": "Delete",
              "icon": "fa fa-trash"
            }
          ]
        }
      },
      "binds": [
        {
          "wid": "self",
          "event": "test_connection",
          "actiontype": "script",
          "script": "const selectedRow = event.params; if (selectedRow) { fetch(`/hermes-web-cli/services/test?id=${selectedRow.id}`).then(response => response.json()).then(data => { alert(`Connection test: ${data.status_message}`); }); }"
        },
        {
          "wid": "self",
          "event": "edit_service",
          "actiontype": "script",
          "script": "const selectedRow = event.params; if (selectedRow) { const url = `{{entire_url('edit_service.ui')}}?service_id=${selectedRow.id}`; bricks.app.load_widget(url, 'main-content', 'replace'); }"
        },
        {
          "wid": "self",
          "event": "delete_service",
          "actiontype": "script",
          "script": "const selectedRow = event.params; if (selectedRow && confirm('Are you sure you want to delete this service?')) { fetch(`/hermes-web-cli/services/${selectedRow.id}`, { method: 'DELETE' }).then(() => { this.refresh(); }); }"
        }
      ]
    }
  ]
}