{% 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="tasks">
    <!-- =================================================================== -->
    <!--       1. 页面顶栏：标题与全局控制器                                   -->
    <!-- =================================================================== -->
    <div class="flex items-center justify-between mb-6 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-primary">
                <i class="fas fa-plus mr-2 h-4 w-4"></i>
                新建任务
            </button>
        </div>
    </div>
    
    <!-- =================================================================== -->
    <!--       2. 主内容区：任务列表                                         -->
    <!-- =================================================================== -->
    <div class="rounded-lg border border-border flex-grow overflow-hidden flex flex-col">
        <!-- 容器需要 overflow-auto 以便表格内容超出时滚动 -->
        <div class="relative w-full overflow-auto flex-grow main-content-scroll">
            <table class="w-full caption-bottom text-sm">
                <thead class="[&_tr]:border-b border-b-border sticky top-0 bg-muted/50 dark:bg-muted/50 z-10">
                    <tr class="transition-colors hover:bg-muted/80 dark:hover:bg-muted/80">
                        <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground w-24">状态</th>
                        <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">任务名称</th>
                        <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">CRON 表达式</th>
                        <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">上次运行</th>
                        <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">下次运行</th>
                        <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground w-32">操作</th>
                    </tr>
                </thead>
                <tbody class="[&_tr:last-child]:border-0">
                    <!-- 示例任务 1: 运行中 -->
                    <tr class="border-b border-b-border transition-colors hover:bg-muted/80 dark:hover:bg-muted/80">
                        <td class="p-4 align-middle">
                            <div class="inline-flex items-center gap-2">
                                <span class="relative flex h-3 w-3">
                                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                                  <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
                                </span>
                                <span class="text-foreground">运行中</span>
                            </div>
                        </td>
                        <td class="p-4 align-middle font-medium">密钥可用性检查</td>
                        <td class="p-4 align-middle font-mono text-muted-foreground">0 */1 * * *</td>
                        <td class="p-4 align-middle text-muted-foreground">2024-05-21 10:30:00</td>
                        <td class="p-4 align-middle text-muted-foreground">2024-05-21 11:30:00</td>
                        <td class="p-4 align-middle space-x-2">
                            <button class="btn btn-ghost btn-icon btn-sm" aria-label="立即运行"><i class="fas fa-play"></i></button>
                            <button class="btn btn-ghost btn-icon btn-sm" aria-label="编辑任务"><i class="fas fa-pencil-alt"></i></button>
                        </td>
                    </tr>
                    <!-- 示例任务 2: 已暂停 -->
                    <tr class="border-b border-b-border transition-colors hover:bg-muted/80 dark:hover:bg-muted/80">
                        <td class="p-4 align-middle">
                            <div class="inline-flex items-center gap-2">
                                <span class="relative flex h-3 w-3"><span class="relative inline-flex rounded-full h-3 w-3 bg-yellow-500"></span></span>
                                <span class="text-foreground">已暂停</span>
                            </div>
                        </td>
                        <td class="p-4 align-middle font-medium">清理过期日志</td>
                        <td class="p-4 align-middle font-mono text-muted-foreground">0 1 * * *</td>
                        <td class="p-4 align-middle text-muted-foreground">2024-05-20 01:00:00</td>
                        <td class="p-4 align-middle text-muted-foreground">N/A</td>
                        <td class="p-4 align-middle space-x-2">
                            <button class="btn btn-ghost btn-icon btn-sm" aria-label="立即运行"><i class="fas fa-play"></i></button>
                            <button class="btn btn-ghost btn-icon btn-sm" aria-label="编辑任务"><i class="fas fa-pencil-alt"></i></button>
                        </td>
                    </tr>
                    <!-- 示例任务 3: 失败 -->
                     <tr class="border-b border-b-border transition-colors hover:bg-muted/80 dark:hover:bg-muted/80">
                        <td class="p-4 align-middle">
                            <div class="inline-flex items-center gap-2">
                                <span class="relative flex h-3 w-3"><span class="relative inline-flex rounded-full h-3 w-3 bg-destructive"></span></span>
                                <span class="text-destructive">失败</span>
                            </div>
                        </td>
                        <td class="p-4 align-middle font-medium">同步外部数据源</td>
                        <td class="p-4 align-middle font-mono text-muted-foreground">*/30 * * * *</td>
                        <td class="p-4 align-middle text-muted-foreground">2024-05-21 10:00:00 (错误)</td>
                        <td class="p-4 align-middle text-muted-foreground">2024-05-21 10:30:00</td>
                        <td class="p-4 align-middle space-x-2">
                           <button class="btn btn-ghost btn-icon btn-sm" aria-label="查看日志"><i class="fas fa-file-alt"></i></button>
                           <button class="btn btn-ghost btn-icon btn-sm" aria-label="编辑任务"><i class="fas fa-pencil-alt"></i></button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

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