{% set trend = get_usage_trend(request) %}
{
    "widgettype": "VBox",
    "options": {
        "css": "stat-card",
        "padding": "20px",
        "borderRadius": "12px",
        "flex": "1",
        "minHeight": "110px",
        "cursor": "pointer",
        "borderLeft": "4px solid {% if trend.trend == 'up' %}#22c55e{% elif trend.trend == 'down' %}#ef4444{% else %}#3b82f6{% endif %}"
    },
    "subwidgets": [
        {
            "widgettype": "HBox",
            "options": {
                "alignItems": "center",
                "marginBottom": "12px"
            },
            "subwidgets": [
                {
                    "widgettype": "Svg",
                    "options": {
                        "svg": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M7.5 21L3 16.5m0 0L7.5 12M12 9v7.5m0 0l4.5-4.5M12 9l4.5 4.5m0 0L12 16.5\"/><path d=\"M21 12h-4.5M12 3v4.5m0 0L7.5 12\"/></svg>",
                        "width": "24px",
                        "height": "24px",
                        "color": "#3b82f6"
                    }
                },
                {
                    "widgettype": "Filler"
                }
            ]
        },
        {
            "widgettype": "Text",
            "options": {
                "css": "stat-value",
                "text": "{{trend.value}}",
                "fontSize": "32px",
                "fontWeight": "700",
                "lineHeight": "1.1"
            }
        },
        {
            "widgettype": "HBox",
            "options": {
                "alignItems": "center",
                "marginTop": "4px"
            },
            "subwidgets": [
                {
                    "widgettype": "Text",
                    "options": {
                        "css": "stat-label",
                        "fontSize": "14px",
                        "otext": "今日调用笔数",
                        "i18n": true
                    }
                },
                {
                    "widgettype": "Filler"
                },
                {
                    "widgettype": "HBox",
                    "options": {
                        "alignItems": "center",
                        "gap": "4px"
                    },
                    "subwidgets": [
                        {
                            "widgettype": "Svg",
                            "options": {
                                "svg": "{% if trend.trend == 'up' %}<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#22c55e\" stroke-width=\"2\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>{% elif trend.trend == 'down' %}<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ef4444\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>{% else %}<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"2\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg>{% endif %}",
                                "width": "16px",
                                "height": "16px"
                            }
                        },
                        {
                            "widgettype": "Text",
                            "options": {
                                "text": "{{trend.percentage|round(1)}}%",
                                "fontSize": "12px",
                                "fontWeight": "600",
                                "color": "{% if trend.trend == 'up' %}#22c55e{% elif trend.trend == 'down' %}#ef4444{% else %}#94a3b8{% endif %}"
                            }
                        }
                    ]
                }
            ]
        }
    ]
}