<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{if .Title}}{{.Title}} - {{end}}微信机器人管理系统</title>
    <!-- 添加 favicon -->
    <link rel="icon" href="/public/images/logo.png" type="image/png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8fafc;
        }
        
        /* 点状图案背景 - 代替大面积色块 */
        .pattern-dots {
            background-image: radial-gradient(#e2e8f0 0.5px, transparent 0.5px);
            background-size: 15px 15px;
        }
        
        /* 内容区宽度控制 */
        .content-container {
            max-width: 1280px;  /* 限制最大宽度 */
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        
        @media (min-width: 1536px) {
            .content-container {
                max-width: 1280px; /* 即使在超宽屏幕上也保持这个宽度 */
            }
        }
        
        /* 按钮样式 */
        .btn {
            @apply inline-flex items-center justify-center px-4 py-2 border rounded-lg text-sm font-medium transition-colors shadow-sm;
        }
        
        .btn-primary {
            @apply border-transparent bg-gray-800 text-white hover:bg-gray-700;
        }
        
        .btn-secondary {
            @apply border-gray-300 bg-white text-gray-700 hover:bg-gray-50;
        }
        
        .btn-danger {
            @apply border-transparent bg-red-600 text-white hover:bg-red-700;
        }
        
        /* 卡片样式 */
        .card {
            @apply bg-white border border-gray-100 rounded-lg shadow-sm overflow-hidden;
        }
        
        /* 状态徽章样式 */
        .badge {
            @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
        }
        
        .badge-success {
            @apply bg-green-100 text-green-800;
        }
        
        .badge-warning {
            @apply bg-yellow-100 text-yellow-800;
        }
        
        .badge-danger {
            @apply bg-red-100 text-red-800;
        }
    </style>
    
    {{if .CustomCSS}}
    <style>
        {{.CustomCSS}}
    </style>
    {{end}}
</head>
<body>
    {{if not .NoLayout}}
    <!-- 顶部导航栏 -->
    <header class="bg-white border-b border-gray-100 fixed top-0 inset-x-0 z-30 h-16">
        <div class="content-container h-full px-4 flex items-center justify-between">
            <!-- Logo和标题 -->
            <div class="flex items-center">
                <a href="/admin/robots" class="flex items-center">
                    <img src="/public/images/logo.png" alt="WeChat Bot Logo" class="h-8 mr-3">
                    <span class="font-semibold text-lg text-gray-800">WeChatBot</span>
                </a>
            </div>
            
            <!-- 右侧操作区 -->
            <div class="flex items-center space-x-4">
                <a href="/admin/robots" class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-robot mr-1"></i> 机器人
                </a>
                
                <a href="/logout" class="btn btn-secondary btn-sm">
                    <i class="fas fa-sign-out-alt mr-1"></i> 退出
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="pt-16 min-h-screen">
        <div class="content-container px-4 py-6">
            {{embed}}
        </div>
    </main>
    
    <!-- 移除页脚区域 -->
    <!-- 删除原有的页脚代码，包含"产品"、"资源"、"关于我们"等信息 -->
    
    {{else}}
    <!-- 无布局模式 -->
    {{embed}}
    {{end}}
    
    <!-- 先加载组件库 -->
    <script src="/public/js/components.js"></script>
    
    <!-- 然后加载Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    {{if .CustomJS}}
    <script>
        {{.CustomJS}}
    </script>
    {{end}}
</body>
</html>
