{$layout}

{$var "header"}
<!-- echart -->
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
<link rel="stylesheet" href="/_/@default/servers/server/stat/waf.less" media="all" />
{$end}

{$template "/servers/server/settings/settings_menu"}
{$template "/left_menu"}

<div class="http-config-container">
    <div class="config-section stats-summary">
        <div class="section-title">
            <i class="icon shield"></i>
            防火墙统计概览
        </div>
        
        <div class="stats-grid">
            <div class="stats-column">
                <div class="stats-item">
                    <div class="stats-label">今日拦截</div>
                    <div class="stats-value"><span>{{countDailyBlock}}</span>次</div>
                </div>
            </div>
            
            <div class="stats-column">
                <div class="stats-item">
                    <div class="stats-label">今日验证码验证</div>
                    <div class="stats-value"><span>{{countDailyCaptcha}}</span>次</div>
                </div>
            </div>
            
            <div class="stats-column no-border">
                <div class="stats-item">
                    <div class="stats-label">今日记录</div>
                    <div class="stats-value"><span>{{countDailyLog}}</span>次</div>
                </div>
            </div>
            
            <div class="stats-column">
                <div class="stats-item">
                    <div class="stats-label">本周拦截</div>
                    <div class="stats-value"><span>{{countWeeklyBlock}}</span>次</div>
                </div>
            </div>
            
            <div class="stats-column no-border">
                <div class="stats-item">
                    <div class="stats-label">本月拦截</div>
                    <div class="stats-value"><span>{{countMonthlyBlock}}</span>次</div>
                </div>
            </div>
        </div>
    </div>

    <div class="config-section">
        <div class="section-title">
            <i class="icon chart line"></i>
            近15日趋势
            <div class="legend-container">
                <span class="color-span" style="background: #9DD3E8">全部</span>
                <span class="color-span" style="background: #F39494">拦截</span>
                <span class="color-span" style="background: #FBD88A">验证码</span>
                <span class="color-span" style="background: #879BD7">记录</span>
            </div>
        </div>
        <div class="chart-box" id="daily-chart"></div>
    </div>

    <div class="config-section">
        <div class="section-title">
            <i class="icon pie chart"></i>
            拦截类型分布
        </div>
        <div class="chart-box" id="group-chart"></div>
    </div>
</div>