{
  "widgettype": "VBox",
  "options": {
    "width": "100%",
    "height": "100%",
    "padding": "20px"
  },
  "subwidgets": [
    {
      "widgettype": "Text",
      "options": {
        "text": "Active Sessions",
        "fontSize": "24px",
        "fontWeight": "bold",
        "color": "#F8FAFC",
        "marginBottom": "20px"
      }
    },
    {
      "widgettype": "HBox",
      "options": {
        "width": "100%",
        "marginBottom": "20px",
        "alignItems": "center"
      },
      "subwidgets": [
        {
          "widgettype": "UiStr",
          "id": "session-search",
          "options": {
            "name": "session-search",
            "placeholder": "Search sessions...",
            "width": "300px",
            "icon": "fa fa-search"
          }
        },
        {
          "widgettype": "Filler"
        },
        {
          "widgettype": "Button",
          "options": {
            "icon": "fa fa-plus",
            "label": "New Session",
            "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('new_session.ui')}}"
              },
              "mode": "replace"
            }
          ]
        }
      ]
    },
    {
      "widgettype": "List",
      "id": "sessions-list",
      "options": {
        "width": "100%",
        "height": "calc(100% - 100px)",
        "itemHeight": "80px",
        "data_url": "/hermes-web-cli/sessions/list/",
        "item_template_url": "{{entire_url('session-list-item.ui')}}"
      }
    }
  ]
}