{% extends "base.html" %}
{% block title %}日志管理 - GEMINI BALANCER{% endblock %}

{% block content %}
<div class="w-full h-full flex flex-col pl-0 pr-3 lg:px-0" data-page-id="logs">
    <!-- =================================================================== -->
    <!--       1. 页面顶栏：标题与全局控制器                                   -->
    <!-- =================================================================== -->
    <div class="flex items-center justify-between mb-4 shrink-0">
        <div>
            <h2 class="text-3xl font-bold tracking-tight">日志管理</h2>
            <p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">查看、筛选和分析所有通过系统的请求记录。</p>
        </div>
        <div class="flex items-center space-x-2">
            <!-- [新] 日志系统参数管理图标 -->
            <button class="btn btn-icon" aria-label="日志设置">
                <i class="fas fa-cog text-lg"></i>
            </button>
        </div>
    </div>
    
    <!-- =================================================================== -->
    <!--       2. 导航标签                                                   -->
    <!-- =================================================================== -->
    <div class="py-2 shrink-0">
        <div class="w-full overflow-x-auto scrollbar-hide">
            <div role="tablist" class="relative inline-flex h-10 items-center justify-center inset-shadow-sm/25 rounded-lg bg-zinc-800/50 dark:bg-zinc-950 p-1" data-sliding-tabs-container>
                <div class="absolute left-0 h-[calc(100%-0.5rem)] rounded-md bg-white dark:bg-zinc-700 shadow-sm" data-tab-indicator style="transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);"></div>
                <a href="#" role="tab" class="tab-item tab-active" data-tab-item data-tab-target="error">错误日志</a>
                <a href="#" role="tab" class="tab-item" data-tab-item data-tab-target="system">系统日志</a>
                <a href="#" role="tab" class="tab-item" data-tab-item>保留标签</a>
                <a href="#" role="tab" class="tab-item" data-tab-item>保留标签</a>
            </div>
        </div>
    </div>

    <!-- =================================================================== -->
    <!--       3. 主内容区：过滤器 + 表格                                      -->
    <!-- =================================================================== -->
    <div id="error-logs-filters" class="flex items-center justify-between shrink-0 py-4">
    
        <div class="flex flex-1 items-center space-x-2">

            <input id="log-search-input" class="input h-8 w-[150px] lg:w-[250px]" placeholder="全局模糊查找..." value="">
            
            <button id="filter-error-type-btn" class="btn btn-outline border-dashed h-8 px-3 text-xs">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
                    <circle cx="12" cy="12" r="10"></circle><path d="M8 12h8"></path><path d="M12 8v8"></path>
                </svg>
                错误类型
            </button>

            <button id="filter-error-code-btn" class="btn btn-outline border-dashed h-8 px-3 text-xs">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
                    <circle cx="12" cy="12" r="10"></circle><path d="M8 12h8"></path><path d="M12 8v8"></path>
                </svg>
                错误码
            </button>
            
            <button class="btn btn-outline border-dashed h-8 px-3 text-xs">
                <i class="fas fa-calendar-alt mr-2 h-4 w-4"></i>
                时间范围
            </button>
        </div>
        
        <button class="btn btn-outline hidden lg:flex h-8 px-3 text-xs">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
                <path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle>
            </svg>
            批量操作
        </button>
    </div>

        <!-- [新增] 3.2 系统日志的快捷操作栏 (默认隐藏) -->
    <div id="system-logs-controls" class="hidden flex items-center justify-between shrink-0 py-4">
        <div class="flex flex-1 items-center space-x-2">
            <button data-action="clear-terminal" class="btn btn-outline h-8 px-3 text-xs">
                <i class="fas fa-trash-alt mr-2 h-4 w-4"></i>
                清屏
            </button>
            <button data-action="toggle-pause-terminal" class="btn btn-outline h-8 px-3 text-xs">
                <i class="fas fa-pause mr-2 h-4 w-4"></i>
                <span>暂停</span>
            </button>
            <button data-action="toggle-scroll-terminal" class="btn btn-outline h-8 px-3 text-xs">
                <i class="fas fa-arrow-down mr-2 h-4 w-4"></i>
                <span>自动滚动</span>
            </button>
        </div>
        <div class="flex items-center space-x-3">
            <div id="terminal-status-indicator" class="flex items-center text-xs text-zinc-500 dark:text-zinc-400">
                <span class="relative flex h-2 w-2 mr-2">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-zinc-400 dark:bg-zinc-500 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-zinc-500 dark:bg-zinc-600"></span>
                </span>
                未连接
            </div>
            <button data-action="disconnect-terminal" class="btn btn-danger h-8 px-3 text-xs">
                <i class="fas fa-times-circle mr-2 h-4 w-4"></i>
                关闭
            </button>
        </div>
    </div>

    <!-- [修改] 3.3 核心内容容器，它的 *内部* 将被动态替换 -->
    <div id="log-content-container" class="rounded-lg border border-zinc-200 dark:border-zinc-700 flex-grow overflow-hidden flex flex-col">
        <!-- template 在这里切换 -->
    </div>
</div>



<template id="error-logs-template">
            <div class="relative w-full overflow-auto flex-grow main-content-scroll">
                <table class="table">
                    <thead class="table-header">
                        <tr class="table-row">
                            <th class="table-head-cell w-4">
                                <input type="checkbox" class="h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500">
                            </th>
                            <th class="table-head-cell w-16">序号</th>
                            <th class="table-head-cell">Gemini 密钥</th>
                            <th class="table-head-cell">群组名称</th>
                            <th class="table-head-cell">错误类型</th>
                            <th class="table-head-cell">状态码</th>
                            <th class="table-head-cell">模型名称</th>
                            <th class="table-head-cell">请求时间</th>
                            <th class="table-head-cell">操作</th>
                        </tr>
                    </thead>
                    <tbody class="table-body" id="logs-table-body">
                        <!-- JS will render content here -->
                    </tbody>
                </table>
            </div>

            <!-- 分页控制器部分 -->
            <div class="flex items-center justify-between p-2 shrink-0 border-t border-zinc-200 dark:border-zinc-700">
                <div class="flex-1 text-sm text-zinc-500 dark:text-zinc-400">
                    已选择 <span class="font-semibold text-zinc-900 dark:text-white">0</span> / <span class="font-semibold text-zinc-900 dark:text-white">0</span>
                </div>
                <div class="flex items-center space-x-6 lg:space-x-8">
                    <div class="flex items-center space-x-2">
    <p class="text-sm font-medium">每页行数</p>

                        <div data-component="custom-select-v2">
                            <button type="button" class="custom-select-trigger btn btn-secondary h-8 w-[70px] flex justify-between items-center px-2">
                                <span>20</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50"><path d="m6 9 6 6 6-6"></path></svg>
                            </button>

                            <select class="hidden">
                                <option value="20" selected>20</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>

                            <template class="custom-select-panel-template">
                                <div class="custom-select-panel w-[70px] bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md shadow-lg z-[100]">
                                    <!--  JS <select>  -->
                                </div>
                            </template>
                        </div>
                    </div>
                    <div class="flex w-[100px] items-center justify-center text-sm font-medium">
                        第 1 / 1 页
                    </div>
                    <div class="flex items-center space-x-2" data-pagination-controls>
                        <button class="btn btn-secondary h-8 w-8 p-0 hidden lg:flex" disabled>
                            <span class="sr-only">Go to first page</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path></svg>
                        </button>
                        <button class="btn btn-secondary h-8 w-8 p-0" disabled>
                            <span class="sr-only">Go to previous page</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="m15 18-6-6 6-6"></path></svg>
                        </button>
                        <button class="btn btn-secondary h-8 w-8 p-0">
                            <span class="sr-only">Go to next page</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="m9 18 6-6-6-6"></path></svg>
                        </button>
                        <button class="btn btn-secondary h-8 w-8 p-0 hidden lg:flex">
                            <span class="sr-only">Go to last page</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                        </button>
                    </div>
                </div>
            </div>
</template>

<template id="system-logs-template">
    <div id="log-terminal-output" class="w-full h-full overflow-y-auto main-content-scroll p-4 font-mono text-sm text-zinc-200 bg-zinc-900 dark:bg-black whitespace-pre-wrap break-all">
        <!-- WebSocket 日志将在此处实时渲染 -->
    </div>
</template>
{% endblock %}

{% block modals %}
<!-- 日志详情模态框将在此处定义 -->
{% endblock modals %}

{% block page_scripts %}
{% endblock page_scripts %}