{% block content %}
<!-- 页面标题区域 -->
<div class="openapi-header" id="openapi-header">
    <div class="openapi-header-content">
        <div class="openapi-title-wrapper">
            <div class="openapi-icon"><i class="bi bi-cloud-check"></i></div>
            <div>
                <h4 class="openapi-title">开放平台管理</h4>
                <p class="openapi-subtitle">管理QQ开发者平台的机器人数据</p>
            </div>
        </div>
        <div class="openapi-status-wrapper">
            <div class="openapi-login-status" id="openapi-login-status">
                <i class="bi bi-x-circle"></i>
                <span>未登录</span>
            </div>
            <div class="openapi-actions" id="openapi-header-actions" style="display: none;">
                <button class="openapi-btn header-btn" id="openapi-get-notifications">
                    <i class="bi bi-bell"></i> 通知
                </button>
                <button class="openapi-btn header-btn" id="openapi-refresh-botlist">
                    <i class="bi bi-arrow-clockwise"></i> 刷新
                </button>
                <button class="openapi-btn header-btn" id="openapi-logout">
                    <i class="bi bi-box-arrow-right"></i> 退出
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 登录状态卡片 -->
<div class="login-card" id="openapi-login-card">
    <div id="openapi-not-logged-in" class="login-content">
        <div class="login-icon"><i class="bi bi-shield-lock"></i></div>
        <h5>开放平台登录</h5>
        <p class="text-muted">请先登录QQ开发者平台以查看和管理机器人数据</p>
        <button class="openapi-btn primary large" id="openapi-start-login">
            <i class="bi bi-qr-code"></i> 开始登录
        </button>
        <div id="openapi-login-progress" class="login-progress" style="display: none;">
            <div id="openapi-login-loading" class="login-loading">
                <div class="spinner"></div>
                <p>正在生成登录二维码...</p>
            </div>
            <div id="openapi-qr-container" class="qr-container" style="display: none;">
                <img id="openapi-qr-image" src="" alt="登录二维码" class="qr-image">
                <p class="text-muted">请使用手机QQ扫描上方二维码</p>
                <button class="openapi-btn outline" id="openapi-login-url">
                    <i class="bi bi-box-arrow-up-right"></i> 或点击打开登录页面
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 机器人列表 -->
<div class="bot-list-card" id="openapi-main-content" style="display: none;">
    <div class="bot-list-header">
        <i class="bi bi-robot"></i>
        <span>机器人列表</span>
    </div>
    <div class="bot-list-body">
        <div id="openapi-botlist-loading" class="loading-state">
            <div class="spinner"></div>
            <p>正在获取机器人列表...</p>
        </div>
        <div id="openapi-botlist-container" style="display: none;">
            <div class="bot-grid" id="openapi-botlist-table"></div>
        </div>
    </div>
</div>

<!-- 数据展示区域 -->
<div class="data-section" id="openapi-data-section" style="display: none;">
    <div class="data-section-header">
        <h6 id="openapi-data-title"><i class="bi bi-table"></i> 数据详情</h6>
        <button class="openapi-btn outline small" id="openapi-close-data">
            <i class="bi bi-x-lg"></i> 关闭
        </button>
    </div>
    <div class="data-section-body">
        <div id="openapi-data-loading" class="loading-state">
            <div class="spinner"></div>
            <p>正在获取数据...</p>
        </div>
        
        <span id="openapi-data-appid" style="display: none;">-</span>
        <span id="openapi-data-avg-dau" style="display: none;">-</span>
        
        <!-- 数据表格 -->
        <div id="openapi-data-table-container" style="display: none;">
            <div class="avg-dau-badge">
                <i class="bi bi-graph-up"></i> 平均DAU: <strong id="openapi-avg-dau-display">-</strong>
            </div>
            <div class="table-responsive">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>上行消息</th>
                            <th>活跃用户</th>
                            <th>下行消息</th>
                            <th>总消息</th>
                            <th>群组</th>
                            <th>好友</th>
                        </tr>
                    </thead>
                    <tbody id="openapi-data-table"></tbody>
                </table>
            </div>
        </div>
        
        <!-- 通知消息 -->
        <div id="openapi-notifications-container" style="display: none;">
            <div class="table-responsive">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th style="width: 15%;">时间</th>
                            <th style="width: 20%;">标题</th>
                            <th>内容</th>
                        </tr>
                    </thead>
                    <tbody id="openapi-notifications-table"></tbody>
                </table>
            </div>
        </div>
        
        <!-- 白名单 -->
        <div id="openapi-whitelist-container" style="display: none;">
            <div class="whitelist-actions">
                <button class="openapi-btn success small" onclick="addNewIpInput()">
                    <i class="bi bi-plus-lg"></i> 添加IP
                </button>
                <button class="openapi-btn primary small" id="batch-add-ips-btn" onclick="batchAddIps()" style="display: none;">
                    <i class="bi bi-shield-check"></i> 批量添加
                </button>
                <button class="openapi-btn outline small" onclick="clearAllInputs()">
                    <i class="bi bi-x-lg"></i> 清空
                </button>
            </div>
            <div class="table-responsive">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>IP地址</th>
                            <th style="width: 100px;">操作</th>
                        </tr>
                    </thead>
                    <tbody id="openapi-whitelist-table"></tbody>
                </table>
            </div>
        </div>
        
        <!-- 模板列表 -->
        <div id="openapi-templates-container" style="display: none;">
            <div class="templates-grid">
                <div class="templates-list-section">
                    <div class="templates-list-header">
                        <span id="template-list-title"><i class="bi bi-layout-text-sidebar-reverse"></i> 模板列表</span>
                        <div class="templates-list-actions">
                            <button class="openapi-btn danger small" onclick="deleteSelectedTemplates()" id="delete-templates-btn" style="display: none;">
                                <i class="bi bi-trash"></i> 删除
                            </button>
                            <button class="openapi-btn primary small" onclick="submitSelectedTemplates()" id="submit-templates-btn" style="display: none;">
                                <i class="bi bi-send-check"></i> 提审
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="data-table compact">
                            <thead>
                                <tr>
                                    <th style="width: 30px;"><input type="checkbox" id="select-all-templates" onchange="toggleAllTemplates(this)"></th>
                                    <th>模板名称</th>
                                    <th>类型</th>
                                    <th>状态</th>
                                    <th style="width: 60px;">操作</th>
                                </tr>
                            </thead>
                            <tbody id="openapi-templates-table"></tbody>
                        </table>
                    </div>
                </div>
                <div class="template-detail-section" id="openapi-template-detail" style="display: none;">
                    <div class="template-detail-header">
                        <span><i class="bi bi-info-circle"></i> 模板详情</span>
                        <span class="template-index-badge" id="template-detail-index">1/1</span>
                    </div>
                    <div class="template-detail-body">
                        <div class="detail-row"><span class="label">模板ID:</span><span id="template-detail-id">-</span></div>
                        <div class="detail-row"><span class="label">名称:</span><span id="template-detail-name">-</span></div>
                        <div class="detail-row"><span class="label">类型:</span><span id="template-detail-type">-</span></div>
                        <div class="detail-row"><span class="label">状态:</span><span id="template-detail-status">-</span></div>
                        <div class="detail-row"><span class="label">创建时间:</span><span id="template-detail-create-time">-</span></div>
                        <div class="detail-content">
                            <span class="label">模板内容:</span>
                            <pre id="template-detail-content">-</pre>
                        </div>
                        <div id="template-button-preview" style="display: none;">
                            <span class="label">按钮预览:</span>
                            <div id="template-button-rows" class="button-preview"></div>
                        </div>
                        <div class="template-nav">
                            <button class="openapi-btn outline small" id="template-prev-btn" style="display: none;"><i class="bi bi-chevron-left"></i> 上一个</button>
                            <button class="openapi-btn outline small" id="template-next-btn" style="display: none;">下一个 <i class="bi bi-chevron-right"></i></button>
                        </div>