{% set credits = get_my_credits_web(request) %}
{
    "widgettype": "VBox",
    "options": {
        "width": "100%",
        "gap": "12px",
        "padding": "4px"
    },
    "subwidgets": [
{% if credits|length == 0 %}
        {
            "widgettype": "VBox",
            "options": {
                "bgcolor": "#1E293B",
                "padding": "40px",
                "borderRadius": "10px",
                "border": "1px solid #334155",
                "alignItems": "center"
            },
            "subwidgets": [
                {
                    "widgettype": "Text",
                    "options": {
                        "text": "暂无信用额度记录",
                        "fontSize": "16px",
                        "color": "#94A3B8"
                    }
                },
                {
                    "widgettype": "Text",
                    "options": {
                        "text": "请联系您的分销商销售人员为您设置信用额度",
                        "fontSize": "13px",
                        "color": "#64748B",
                        "marginTop": "8px"
                    }
                }
            ]
        }
{% else %}
{% for c in credits %}
        {
            "widgettype": "VBox",
            "options": {
                "bgcolor": "#1E293B",
                "padding": "16px",
                "borderRadius": "10px",
                "border": "1px solid #334155",
                "gap": "12px"
            },
            "subwidgets": [
                {
                    "widgettype": "HBox",
                    "options": {
                        "alignItems": "center",
                        "justifyContent": "space-between"
                    },
                    "subwidgets": [
                        {
                            "widgettype": "VBox",
                            "options": {"gap": "2px"},
                            "subwidgets": [
                                {
                                    "widgettype": "Text",
                                    "options": {
                                        "text": "{{c.orgname_text or '未知客户'}}",
                                        "fontSize": "16px",
                                        "fontWeight": "600",
                                        "color": "#F1F5F9"
                                    }
                                },
                                {
                                    "widgettype": "Text",
                                    "options": {
                                        "text": "{{c.subject_name or ''}} | 账户: {{c.accountid}}",
                                        "fontSize": "12px",
                                        "color": "#64748B"
                                    }
                                }
                            ]
                        },
                        {
                            "widgettype": "VBox",
                            "options": {
                                "bgcolor": "{{'#16A34A22' if c.status == 'active' else '#EF444422'}}",
                                "padding": "4px 12px",
                                "borderRadius": "12px"
                            },
                            "subwidgets": [
                                {
                                    "widgettype": "Text",
                                    "options": {
                                        "text": "{{'生效' if c.status == 'active' else ('停用' if c.status == 'inactive' else '已过期')}}",
                                        "fontSize": "12px",
                                        "fontWeight": "600",
                                        "color": "{{'#22C55E' if c.status == 'active' else '#EF4444'}}"
                                    }
                                }
                            ]
                        }
                    ]
                },
                {
                    "widgettype": "HBox",
                    "options": {
                        "gap": "12px",
                        "alignItems": "center"
                    },
                    "subwidgets": [
                        {
                            "widgettype": "VBox",
                            "options": {"flex": "1", "gap": "4px"},
                            "subwidgets": [
                                {
                                    "widgettype": "HBox",
                                    "options": {"justifyContent": "space-between"},
                                    "subwidgets": [
                                        {
                                            "widgettype": "Text",
                                            "options": {
                                                "text": "额度使用",
                                                "fontSize": "12px",
                                                "color": "#94A3B8"
                                            }
                                        },
                                        {
                                            "widgettype": "Text",
                                            "options": {
                                                "text": "{{c.usage_pct}}%",
                                                "fontSize": "12px",
                                                "fontWeight": "600",
                                                "color": "{{'#22C55E' if c.usage_pct < 60 else ('#F59E0B' if c.usage_pct < 85 else '#EF4444')}}"
                                            }
                                        }
                                    ]
                                },
                                {
                                    "widgettype": "HBox",
                                    "options": {
                                        "bgcolor": "#334155",
                                        "borderRadius": "4px",
                                        "height": "8px",
                                        "width": "100%"
                                    },
                                    "subwidgets": [
                                        {
                                            "widgettype": "HBox",
                                            "options": {
                                                "bgcolor": "{{'#22C55E' if c.usage_pct < 60 else ('#F59E0B' if c.usage_pct < 85 else '#EF4444')}}",
                                                "borderRadius": "4px",
                                                "height": "8px",
                                                "width": "{{c.usage_pct}}%"
                                            },
                                            "subwidgets": []
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "widgettype": "HBox",
                    "options": {
                        "gap": "8px"
                    },
                    "subwidgets": [
                        {
                            "widgettype": "VBox",
                            "options": {
                                "flex": "1",
                                "bgcolor": "#0F172A",
                                "padding": "10px",
                                "borderRadius": "6px",
                                "alignItems": "center"
                            },
                            "subwidgets": [
                                {
                                    "widgettype": "Text",
                                    "options": {
                                        "text": "¥{{'%.2f' % c.credit_limit}}",
                                        "fontSize": "16px",
                                        "fontWeight": "700",
                                        "color": "#3B82F6"
                                    }
                                },
                                {
                                    "widgettype": "Text",
                                    "options": {
                                        "text": "授信额度",
                                        "fontSize": "11px",
                                        "color": "#64748B",
                                        "marginTop": "2px"
                                    }
                                }
                            ]
                        },
                        {
                            "widgettype": "VBox",
                            "options": {
                                "flex": "1",
                                "bgcolor": "#0F172A",
                                "padding": "10px",
                                "borderRadius": "6px",
                                "alignItems": "center"
                            },
                            "subwidgets": [
                                {
                                    "widgettype": "Text",
                                    "options": {
                                        "text": "¥{{'%.2f' % c.used_credit}}",
                                        "fontSize": "16px",
                                        "fontWeight": "700",
                                        "color": "#F59E0B"
                                    }
                                },
                                {
                                    "widgettype": "Text",
                                    "options": {
                                        "text": "已用额度",
                                        "fontSize": "11px",
                                        "color": "#64748B",
                                        "marginTop": "2px"
                                    }
                                }
                            ]
                        },
                        {
                            "widgettype": "VBox",
                            "options": {
                                "flex": "1",
                                "bgcolor": "#0F172A",
                                "padding": "10px",
                                "borderRadius": "6px",
                                "alignItems": "center"
                            },
                            "subwidgets": [
                                {
                                    "widgettype": "Text",
                                    "options": {
                                        "text": "¥{{'%.2f' % c.available_credit}}",
                                        "fontSize": "16px",
                                        "fontWeight": "700",
                                        "color": "#22C55E"
                                    }
                                },
                                {
                                    "widgettype": "Text",
                                    "options": {
                                        "text": "剩余额度",
                                        "fontSize": "11px",
                                        "color": "#64748B",
                                        "marginTop": "2px"
                                    }
                                }
                            ]
                        }
                    ]
                },
                {
                    "widgettype": "HBox",
                    "options": {
                        "justifyContent": "space-between"
                    },
                    "subwidgets": [
                        {
                            "widgettype": "Text",
                            "options": {
                                "text": "有效期: {{c.valid_from or '不限'}} ~ {{c.valid_to or '不限'}}",
                                "fontSize": "11px",
                                "color": "#64748B"
                            }
                        },
                        {
                            "widgettype": "Text",
                            "options": {
                                "text": "更新于 {{c.updated_at}}",
                                "fontSize": "11px",
                                "color": "#475569"
                            }
                        }
                    ]
                }
            ]
        }{% if not loop.last %},{% endif %}
{% endfor %}
{% endif %}
    ]
}