{$layout}
{$template "/echarts"}

{$var "header"}
<link rel="stylesheet" href="./waf.css" type="text/css"></link>
{$end}

<div class="right-box">
    {$template "stat_menu"}

    <div style="padding: 10px;">
        <div class="stats-card-grid">
            <!-- 今日拦截 -->
            <div class="stat-card">
                <div class="stat-icon red">
                    <i class="pi pi-shield"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">
                        {{countDailyBlock}}
                        <span class="stat-unit">{{t('index_次_0101')}}</span>
                    </div>
                    <div class="stat-label">{{t('index_今日拦截_0101')}}</div>
                </div>
            </div>

            <!-- 今日验证码验证 -->
            <div class="stat-card">
                 <div class="stat-icon blue">
                    <i class="pi pi-check-circle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">
                        {{countDailyCaptcha}}
                       <span class="stat-unit">{{t('index_次_0101')}}</span>
                    </div>
                    <div class="stat-label">{{t('index_今日验证码验证_0101')}}</div>
                </div>
            </div>

            <!-- 今日记录 -->
            <div class="stat-card">
                <div class="stat-icon yellow">
                    <i class="pi pi-file"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">
                         {{countDailyLog}}
                       <span class="stat-unit">{{t('index_次_0101')}}</span>
                    </div>
                    <div class="stat-label">{{t('index_今日记录_0101')}}</div>
                </div>
            </div>

            <!-- 本周拦截 -->
             <div class="stat-card">
                <div class="stat-icon red">
                    <i class="pi pi-shield"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">
                        {{countWeeklyBlock}}
                       <span class="stat-unit">{{t('index_次_0101')}}</span>
                    </div>
                    <div class="stat-label">{{t('index_本周拦截_0101')}}</div>
                </div>
            </div>

            <!-- 本月拦截 -->
             <div class="stat-card">
                <div class="stat-icon red">
                    <i class="pi pi-shield"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">
                       {{countMonthlyBlock}}
                       <span class="stat-unit">{{t('index_次_0101')}}</span>
                    </div>
                    <div class="stat-label">{{t('index_本月拦截_0101')}}</div>
                </div>
            </div>
       </div>
   </div>

    <div class="config-section">
        <div class="section-title">{{t('index_近15日趋势_0101')}}
            <span class="color-span" style="background: #9DD3E8">{{t('index_全部_0101')}}</span>
            <span class="color-span" style="background: #F39494">{{t('index_拦截_0101')}}</span>
            <span class="color-span" style="background: #FBD88A">{{t('index_验证码_0101')}}</span>
            <span class="color-span" style="background: #879BD7">{{t('index_记录_0101')}}</span>
        </div>
         <div style="padding: 10px;">
            <div class="chart-box" id="daily-chart"></div>
        </div>
    </div>

    <div class="config-section">
         <div class="section-title">{{t('index_拦截类型分布_0101')}}</div>
         <div style="padding: 10px;">
            <div class="chart-box" id="group-chart"></div>
        </div>
    </div>
</div>