<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{siteTitle ?: 'Home4j - 个人导航'}</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    
    <!-- Tailwind CSS v4 + DaisyUI 5 -->
    <link href="/css/daisyui@5.css" rel="stylesheet">
    <link href="/css/themes.css" rel="stylesheet">
    <script src="/js/browser@4.js"></script>
    
    <style>
        [x-cloak] { display: none !important; }
        
        /* 滚动条美化 */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: oklch(var(--b2)); }
        ::-webkit-scrollbar-thumb { background: oklch(var(--bc)/0.3); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: oklch(var(--bc)/0.5); }
        
        /* 分组展开/收起动画 */
        .group-chevron { transition: transform 0.2s ease; }
        .group-collapsed .group-chevron { transform: rotate(-90deg); }
        
        /* 书签卡片悬停效果 */
        .bookmark-card { transition: all 0.2s ease; }
        .bookmark-card:hover { transform: translateY(-2px); }
        
        /* 图标盒子渐变 */
        .icon-box {
            background: linear-gradient(135deg, oklch(var(--p)/0.15), oklch(var(--s)/0.15));
        }
        
        /* 图片卡片样式 */
        .image-card-overlay {
            background: linear-gradient(to top, oklch(var(--n)/0.8) 0%, transparent 100%);
        }
        
        /* 列表视图网格 */
        .list-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0.5rem;
        }
        @media (max-width: 1280px) { .list-grid { grid-template-columns: repeat(4, 1fr); } }
        @media (max-width: 1024px) { .list-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 768px) { .list-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 640px) { .list-grid { grid-template-columns: 1fr; } }
        
        /* 自定义背景 */
        .custom-bg-image {
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>
<body class="min-h-screen bg-base-200">
    
    <!-- Alpine.js 主应用 -->
    <div x-data="Home4jApp()" x-init="init()" class="drawer">
        <input id="app-drawer" type="checkbox" class="drawer-toggle" x-model="drawerOpen">
        
        <!-- 主内容区 -->
        <div class="drawer-content flex flex-col min-h-screen"
             :class="bgType === 'image' && bgImage ? 'custom-bg-image' : ''"
             :style="bgType === 'image' && bgImage ? 'background-image: url(' + bgImage + ')' : (bgType === 'color' && bgColor ? 'background-color: ' + bgColor : '')">
            
            <!-- 导航栏 -->
            <nav class="navbar bg-base-100/90 backdrop-blur-sm shadow-sm sticky top-0 z-40">
                <div class="navbar-start">
                    <!-- Logo -->
                    <a href="/" class="btn btn-ghost text-xl gap-2">
                        <span x-html="getIcon('home', 24)" class="text-primary"></span>
                        <span class="font-bold hidden sm:inline" x-text="i18n.appName"></span>
                    </a>
                </div>
                
                <div class="navbar-end gap-1">
                    <!-- 视图切换 -->
                    <div class="dropdown dropdown-end">
                        <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" :title="i18n.viewMode">
                            <span x-html="viewMode === 'list' ? getIcon('list', 18) : getIcon('grid', 18)"></span>
                        </div>
                        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-40 p-2 shadow-lg border border-base-300">
                            <li><a @click="setViewMode('list')" :class="viewMode === 'list' ? 'active' : ''">
                                <span x-html="getIcon('list', 16)"></span>
                                <span x-text="i18n.listView"></span>
                            </a></li>
                            <li><a @click="setViewMode('card')" :class="viewMode === 'card' ? 'active' : ''">
                                <span x-html="getIcon('grid', 16)"></span>
                                <span x-text="i18n.cardView"></span>
                            </a></li>
                        </ul>
                    </div>
                    
                    <!-- 主题切换 -->
                    <div class="dropdown dropdown-end">
                        <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" :title="i18n.theme">
                            <span x-html="currentTheme === 'dark' ? getIcon('moon', 18) : getIcon('sun', 18)"></span>
                        </div>
                        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-44 p-2 shadow-lg border border-base-300 max-h-80 overflow-y-auto">
                            <template x-for="theme in themes" :key="theme.id">
                                <li>
                                    <a @click="setTheme(theme.id)" :class="currentTheme === theme.id ? 'active' : ''" class="gap-3">
                                        <div class="flex gap-1">
                                            <span class="w-2 h-4 rounded-sm" :style="'background-color:' + theme.colors.primary"></span>
                                            <span class="w-2 h-4 rounded-sm" :style="'background-color:' + theme.colors.secondary"></span>
                                            <span class="w-2 h-4 rounded-sm" :style="'background-color:' + theme.colors.accent"></span>
                                        </div>
                                        <span x-text="theme.name" class="flex-1"></span>
                                    </a>
                                </li>
                            </template>
                        </ul>
                    </div>
                    
                    <!-- 语言切换 -->
                    <div class="dropdown dropdown-end">
                        <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" :title="i18n.language">
                            <span x-html="getIcon('globe', 18)"></span>
                        </div>
                        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-36 p-2 shadow-lg border border-base-300">
                            <li><a @click="setLanguage('zh-CN')" :class="language === 'zh-CN' ? 'active' : ''">🇨🇳 中文</a></li>
                            <li><a @click="setLanguage('en-US')" :class="language === 'en-US' ? 'active' : ''">🇺🇸 English</a></li>
                        </ul>
                    </div>
                    
                    {#if isAdmin}
                    <!-- 管理员菜单 -->
                    <div class="dropdown dropdown-end">
                        <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle">
                            <span x-html="getIcon('settings', 18)"></span>
                        </div>
                        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-48 p-2 shadow-lg border border-base-300">
                            <li><a @click="openAddBookmarkDrawer()">
                                <span x-html="getIcon('plus', 16)"></span>
                                <span x-text="i18n.addBookmark"></span>
                            </a></li>
                            <li><a @click="openAddGroupDrawer()">
                                <span x-html="getIcon('folder', 16)"></span>
                                <span x-text="i18n.addGroup"></span>
                            </a></li>
                            <li class="menu-title"><span x-text="i18n.background"></span></li>
                            <li><a @click="openBackgroundSettings()">
                                <span x-html="getIcon('image', 16)"></span>
                                <span x-text="i18n.bgSettings"></span>
                            </a></li>
                            <li class="menu-title"><span x-text="i18n.account"></span></li>
                            <li><a href="/admin">
                                <span x-html="getIcon('settings', 16)"></span>
                                <span x-text="i18n.adminPanel"></span>
                            </a></li>
                            <li><a href="/login/logout">
                                <span x-html="getIcon('x', 16)"></span>
                                <span x-text="i18n.logout"></span>
                            </a></li>
                        </ul>
                    </div>
                    {#else}
                    <button onclick="loginModal.showModal()" class="btn btn-ghost btn-sm btn-circle" :title="i18n.login">
                        <span x-html="getIcon('user', 18)"></span>
                    </button>
                    {/if}
                </div>
            </nav>
            
            <!-- Hero 区域：标题 + 副标题 + 日期时间天气 + 搜索框 -->
            <header class="py-8 px-4 bg-base-100/50">
                <div class="container mx-auto max-w-4xl">
                    <!-- 标题和日期时间天气（两列布局，居中对齐） -->
                    <div class="flex flex-col md:flex-row md:items-center md:justify-center gap-4 md:gap-12 mb-6">
                        <!-- 左侧：标题 + 副标题 -->
                        <div class="text-center md:text-right">
                            <h1 class="text-3xl sm:text-4xl font-bold text-base-content mb-1">{siteTitle ?: 'Welcome Home'}</h1>
                            <p class="text-base-content/60" x-text="i18n.heroSubtitle"></p>
                        </div>
                        <!-- 分隔线 -->
                        <div class="hidden md:block w-px h-16 bg-base-content/20"></div>
                        <!-- 右侧：日期时间 + 天气 -->
                        <div class="text-center md:text-left text-base-content/70">
                            <div class="text-sm" x-text="currentDate"></div>
                            <div class="text-2xl font-mono font-semibold" x-text="currentTime"></div>
                            <template x-if="weather">
                                <div class="text-sm mt-1">
                                    <span x-text="weather.icon"></span>
                                    <span x-text="weather.temp"></span>
                                    <span class="text-base-content/50" x-text="weather.city"></span>
                                </div>
                            </template>
                        </div>
                    </div>
                    <!-- 搜索框（居中） -->
                    <div class="flex justify-center">
                        <div class="join w-full max-w-md">
                            <!-- 搜索模式切换 -->
                            <div class="dropdown dropdown-bottom">
                                <div tabindex="0" role="button" class="btn join-item btn-ghost border border-base-300" :title="searchMode === 'bookmark' ? i18n.searchBookmark : i18n.searchWeb">
                                    <span x-html="searchMode === 'bookmark' ? getIcon('bookmark', 18) : getIcon('globe', 18)"></span>
                                    <span x-html="getIcon('chevronDown', 14)" class="opacity-60"></span>
                                </div>
                                <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-48 p-2 shadow-lg border border-base-300 mt-1">
                                    <li><a @click="searchMode = 'bookmark'; $refs.searchInput.focus()" :class="searchMode === 'bookmark' ? 'active' : ''">
                                        <span x-html="getIcon('bookmark', 16)"></span>
                                        <span x-text="i18n.searchBookmark"></span>
                                    </a></li>
                                    <li class="menu-title mt-2"><span x-text="i18n.searchEngines"></span></li>
                                    <li><a @click="searchMode = 'google'; $refs.searchInput.focus()" :class="searchMode === 'google' ? 'active' : ''">
                                        <span>🔍</span>
                                        <span>Google</span>
                                    </a></li>
                                    <li><a @click="searchMode = 'bing'; $refs.searchInput.focus()" :class="searchMode === 'bing' ? 'active' : ''">
                                        <span>🔎</span>
                                        <span>Bing</span>
                                    </a></li>
                                    <li><a @click="searchMode = 'baidu'; $refs.searchInput.focus()" :class="searchMode === 'baidu' ? 'active' : ''">
                                        <span>🅱️</span>
                                        <span x-text="i18n.baidu"></span>
                                    </a></li>
                                    <li><a @click="searchMode = 'duckduckgo'; $refs.searchInput.focus()" :class="searchMode === 'duckduckgo' ? 'active' : ''">
                                        <span>🦆</span>
                                        <span>DuckDuckGo</span>
                                    </a></li>
                                </ul>
                            </div>
                            <input type="text" 
                                   x-ref="searchInput"
                                   x-model="searchQuery"
                                   @keydown.enter="handleSearch()"
                                   :placeholder="getSearchPlaceholder()"
                                   class="input input-bordered join-item flex-1">
                            <button class="btn join-item" @click="handleSearch()">
                                <span x-html="getIcon('search', 20)"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- 主要内容 -->
            <main class="flex-1 container mx-auto px-4 py-6">
                
                {#if groups.isEmpty()}
                <!-- 空状态 -->
                <div class="text-center py-20">
                    <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-base-300 flex items-center justify-center">
                        <span x-html="getIcon('inbox', 40)" class="text-base-content/30"></span>
                    </div>
                    <h3 class="text-xl font-semibold text-base-content/70 mb-2" x-text="i18n.emptyTitle"></h3>
                    <p class="text-base-content/50 mb-6" x-text="i18n.emptyDesc"></p>
                    {#if isAdmin}
                    <div class="flex justify-center gap-3">
                        <button class="btn btn-primary" @click="openAddGroupDrawer()">
                            <span x-html="getIcon('folder', 18)"></span>
                            <span x-text="i18n.addGroup"></span>
                        </button>
                        <button class="btn btn-outline" @click="openAddBookmarkDrawer()">
                            <span x-html="getIcon('plus', 18)"></span>
                            <span x-text="i18n.addBookmark"></span>
                        </button>
                    </div>
                    {/if}
                </div>
                {#else}
                
                <!-- 分组列表 -->
                <div class="space-y-8">
                    {#for group in groups}
                    <div class="group/section" 
                         x-show="groupHasMatchingBookmarks({group.id})"
                         :class="isGroupCollapsed({group.id}) ? 'group-collapsed' : ''">
                        
                        <!-- 分组标题 -->
                        <div class="flex items-center gap-3 mb-4 group/header">
                            <button class="flex items-center gap-3 flex-1 text-left py-2"
                                    @click="toggleGroupCollapse({group.id})">
                                <span x-html="getIcon('chevron-down', 18)" 
                                      class="group-chevron text-base-content/40"></span>
                                <div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center">
                                    <span x-html="getIcon('{group.icon ?: 'folder'}', 18)" class="text-primary"></span>
                                </div>
                                <span class="text-lg font-semibold text-base-content">{group.name}</span>
                                <span class="badge badge-ghost">{group.bookmarks.size}</span>
                            </button>
                            {#if isAdmin}
                            <div class="opacity-0 group-hover/header:opacity-100 transition-opacity flex gap-1">
                                <button class="btn btn-sm btn-ghost btn-circle" @click="openEditGroupDrawer({group.id})" :title="i18n.edit">
                                    <span x-html="getIcon('edit', 14)"></span>
                                </button>
                                <button class="btn btn-sm btn-ghost btn-circle text-error" @click="deleteGroup({group.id})" :title="i18n.delete">
                                    <span x-html="getIcon('trash', 14)"></span>
                                </button>
                            </div>
                            {/if}
                        </div>
                        
                        <!-- 书签内容 -->
                        <div x-show="!isGroupCollapsed({group.id})" x-collapse>
                            
                            <!-- 列表视图 - 5列网格 -->
                            <div x-show="viewMode === 'list'" class="list-grid">
                                {#for bookmark in group.bookmarks}
                                <div x-show="bookmarkMatchesSearch('{bookmark.name}', '{bookmark.description ?: ''}', '{bookmark.url}')"
                                     class="group/item">
                                    <a href="{bookmark.url}" 
                                       target="{bookmark.openInNewTab ? '_blank' : '_self'}"
                                       class="flex items-center gap-2 p-2 rounded-lg bg-base-100 hover:bg-base-200 border border-base-300 transition-colors">
                                        <div class="w-8 h-8 rounded-lg icon-box flex items-center justify-center flex-shrink-0">
                                            <span x-html="getIcon('{bookmark.icon ?: 'link'}', 16)" class="text-primary"></span>
                                        </div>
                                        <span class="text-sm font-medium text-base-content truncate flex-1">{bookmark.name}</span>
                                        {#if isAdmin}
                                        <div class="opacity-0 group-hover/item:opacity-100 transition-opacity flex gap-0.5">
                                            <button class="btn btn-xs btn-ghost btn-circle" @click.prevent.stop="openEditBookmarkDrawer({bookmark.id})">
                                                <span x-html="getIcon('edit', 12)"></span>
                                            </button>
                                            <button class="btn btn-xs btn-ghost btn-circle text-error" @click.prevent.stop="deleteBookmark({bookmark.id})">
                                                <span x-html="getIcon('trash', 12)"></span>
                                            </button>
                                        </div>
                                        {/if}
                                    </a>
                                </div>
                                {/for}
                            </div>
                            
                            <!-- 卡片视图 -->
                            <div x-show="viewMode === 'card'" 
                                 class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
                                {#for bookmark in group.bookmarks}
                                <div x-show="bookmarkMatchesSearch('{bookmark.name}', '{bookmark.description ?: ''}', '{bookmark.url}')"
                                     class="group/card relative">
                                    
                                    <!-- 图标模式卡片（默认显示，或在图片模式下但没有背景图时显示） -->
                                    <a href="{bookmark.url}" 
                                       target="{bookmark.openInNewTab ? '_blank' : '_self'}"
                                       x-show="cardDisplayMode === 'icon' || !'{bookmark.backgroundImage ?: ''}'"
                                       class="bookmark-card block bg-base-100 rounded-xl shadow-sm hover:shadow-lg border border-base-300 overflow-hidden h-full">
                                        <div class="p-4 flex flex-col items-center text-center">
                                            <div class="icon-box w-12 h-12 rounded-xl flex items-center justify-center mb-3">
                                                <span x-html="getIcon('{bookmark.icon ?: 'link'}', 24)" class="text-primary"></span>
                                            </div>
                                            <h3 class="font-medium text-base-content line-clamp-1 mb-1 text-sm">{bookmark.name}</h3>
                                            {#if bookmark.description}
                                            <p class="text-xs text-base-content/50 line-clamp-2">{bookmark.description}</p>
                                            {/if}
                                        </div>
                                    </a>
                                    
                                    <!-- 背景图模式卡片（仅在图片模式下且有背景图时显示） -->
                                    {#if bookmark.backgroundImage}
                                    <a href="{bookmark.url}" 
                                       target="{bookmark.openInNewTab ? '_blank' : '_self'}"
                                       x-show="cardDisplayMode === 'image'"
                                       class="bookmark-card card image-full h-32 shadow-sm hover:shadow-lg overflow-hidden">
                                        <figure>
                                            <img src="{bookmark.backgroundImage}" alt="{bookmark.name}" class="w-full h-full object-cover">
                                        </figure>
                                        <div class="card-body justify-end p-3 image-card-overlay">
                                            <h3 class="card-title text-white text-sm line-clamp-1">{bookmark.name}</h3>
                                        </div>
                                    </a>
                                    {/if}
                                    
                                    <!-- 管理员操作按钮 -->
                                    {#if isAdmin}
                                    <div class="absolute top-2 right-2 opacity-0 group-hover/card:opacity-100 transition-opacity flex gap-1">
                                        <button class="btn btn-xs btn-circle bg-base-100 shadow border-0 hover:bg-primary hover:text-primary-content" 
                                                @click.prevent.stop="openEditBookmarkDrawer({bookmark.id})" :title="i18n.edit">
                                            <span x-html="getIcon('edit', 12)"></span>
                                        </button>
                                        <button class="btn btn-xs btn-circle bg-base-100 shadow border-0 hover:bg-error hover:text-error-content" 
                                                @click.prevent.stop="deleteBookmark({bookmark.id})" :title="i18n.delete">
                                            <span x-html="getIcon('trash', 12)"></span>
                                        </button>
                                    </div>
                                    {/if}
                                </div>
                                {/for}
                            </div>
                            
                        </div>
                    </div>
                    {/for}
                </div>
                
                {/if}
            </main>
            
            <!-- Footer -->
            <footer class="py-6 text-center border-t border-base-300 bg-base-100/50">
                <p class="text-sm text-base-content/50">{footerText ?: 'Powered by Home4j'}</p>
            </footer>
        </div>
        
        <!-- DaisyUI Drawer 侧边栏 -->
        <div class="drawer-side z-50">
            <label for="app-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
            <div class="bg-base-100 min-h-full w-80 sm:w-96 shadow-2xl">
                
                <!-- 抽屉头部 -->
                <div class="sticky top-0 bg-primary text-primary-content p-5 flex items-center justify-between">
                    <h2 class="text-lg font-semibold" x-text="drawerTitle"></h2>
                    <label for="app-drawer" class="btn btn-sm btn-circle btn-ghost hover:bg-primary-content/20">
                        <span x-html="getIcon('x', 20)"></span>
                    </label>
                </div>
                
                <!-- 抽屉内容 -->
                <div class="p-5">
                    
                    <!-- 书签表单 -->
                    <form x-show="drawerType === 'bookmark'" x-cloak @submit.prevent="saveBookmark()" class="space-y-4">
                        <div class="form-control">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.bookmarkName + ' *'"></span></label>
                            <input type="text" x-model="bookmarkForm.name" required 
                                   class="input input-bordered w-full" :placeholder="i18n.bookmarkNamePlaceholder">
                        </div>
                        <div class="form-control">
                            <label class="label"><span class="label-text font-medium">URL *</span></label>
                            <input type="url" x-model="bookmarkForm.url" required 
                                   class="input input-bordered w-full" placeholder="https://example.com">
                        </div>
                        <div class="form-control">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.description"></span></label>
                            <textarea x-model="bookmarkForm.description" 
                                      class="textarea textarea-bordered w-full" rows="2" :placeholder="i18n.descriptionPlaceholder"></textarea>
                        </div>
                        <div class="form-control">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.icon"></span></label>
                            <div class="flex gap-3">
                                <input type="text" x-model="bookmarkForm.icon" 
                                       class="input input-bordered flex-1" placeholder="link">
                                <div class="w-12 h-12 rounded-xl icon-box flex items-center justify-center">
                                    <span x-html="getIcon(bookmarkForm.icon || 'link', 24)" class="text-primary"></span>
                                </div>
                            </div>
                            <label class="label">
                                <span class="label-text-alt text-base-content/50">home, globe, star, github, youtube, code, heart...</span>
                            </label>
                        </div>
                        <div class="form-control">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.group + ' *'"></span></label>
                            <select x-model="bookmarkForm.groupId" required class="select select-bordered w-full">
                                <option value="" x-text="i18n.selectGroup"></option>
                                {#for group in allGroups}
                                <option value="{group.id}">{group.name}</option>
                                {/for}
                            </select>
                        </div>
                        
                        <!-- 显示模式 -->
                        <div class="form-control">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.displayMode"></span></label>
                            <select x-model="bookmarkForm.displayMode" class="select select-bordered w-full">
                                <option value="icon" x-text="i18n.iconMode"></option>
                                <option value="image" x-text="i18n.imageMode"></option>
                            </select>
                        </div>
                        
                        <!-- 背景图片URL（仅图片模式显示） -->
                        <div class="form-control" x-show="bookmarkForm.displayMode === 'image'">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.backgroundImage"></span></label>
                            <input type="url" x-model="bookmarkForm.backgroundImage" 
                                   class="input input-bordered w-full" :placeholder="i18n.bgImagePlaceholder">
                        </div>
                        
                        <div class="form-control">
                            <label class="label cursor-pointer justify-start gap-3">
                                <input type="checkbox" x-model="bookmarkForm.openInNewTab" class="checkbox checkbox-primary">
                                <span class="label-text" x-text="i18n.openInNewTab"></span>
                            </label>
                        </div>
                        <div class="flex gap-3 pt-4">
                            <button type="submit" class="btn btn-primary flex-1" :disabled="saving">
                                <span x-show="saving" class="loading loading-spinner loading-sm"></span>
                                <span x-text="bookmarkForm.id ? i18n.save : i18n.add"></span>
                            </button>
                            <label for="app-drawer" class="btn btn-ghost" x-text="i18n.cancel"></label>
                        </div>
                    </form>
                    
                    <!-- 分组表单 -->
                    <form x-show="drawerType === 'group'" x-cloak @submit.prevent="saveGroup()" class="space-y-4">
                        <div class="form-control">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.groupName + ' *'"></span></label>
                            <input type="text" x-model="groupForm.name" required 
                                   class="input input-bordered w-full" :placeholder="i18n.groupNamePlaceholder">
                        </div>
                        <div class="form-control">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.icon"></span></label>
                            <div class="flex gap-3">
                                <input type="text" x-model="groupForm.icon" 
                                       class="input input-bordered flex-1" placeholder="folder">
                                <div class="w-12 h-12 rounded-xl icon-box flex items-center justify-center">
                                    <span x-html="getIcon(groupForm.icon || 'folder', 24)" class="text-primary"></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-control">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.sortOrder"></span></label>
                            <input type="number" x-model="groupForm.sortOrder" 
                                   class="input input-bordered w-full" placeholder="0">
                            <label class="label">
                                <span class="label-text-alt text-base-content/50" x-text="i18n.sortOrderHint"></span>
                            </label>
                        </div>
                        <div class="flex gap-3 pt-4">
                            <button type="submit" class="btn btn-primary flex-1" :disabled="saving">
                                <span x-show="saving" class="loading loading-spinner loading-sm"></span>
                                <span x-text="groupForm.id ? i18n.save : i18n.add"></span>
                            </button>
                            <label for="app-drawer" class="btn btn-ghost" x-text="i18n.cancel"></label>
                        </div>
                    </form>
                    
                    <!-- 背景设置表单 -->
                    <form x-show="drawerType === 'background'" x-cloak @submit.prevent="saveBackground()" class="space-y-4">
                        <div class="form-control">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.bgType"></span></label>
                            <select x-model="bgType" class="select select-bordered w-full">
                                <option value="theme" x-text="i18n.bgTheme"></option>
                                <option value="color" x-text="i18n.bgColor"></option>
                                <option value="image" x-text="i18n.bgImage"></option>
                            </select>
                        </div>
                        
                        <!-- 纯色背景 -->
                        <div class="form-control" x-show="bgType === 'color'">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.selectColor"></span></label>
                            <input type="color" x-model="bgColor" class="w-full h-12 rounded-lg cursor-pointer">
                        </div>
                        
                        <!-- 图片背景 -->
                        <div class="form-control" x-show="bgType === 'image'">
                            <label class="label"><span class="label-text font-medium" x-text="i18n.imageUrl"></span></label>
                            <input type="url" x-model="bgImage" 
                                   class="input input-bordered w-full" :placeholder="i18n.bgImagePlaceholder">
                            <template x-if="bgImage">
                                <div class="mt-2 rounded-lg overflow-hidden h-32">
                                    <img :src="bgImage" class="w-full h-full object-cover" alt="Preview">
                                </div>
                            </template>
                        </div>
                        
                        <div class="flex gap-3 pt-4">
                            <button type="submit" class="btn btn-primary flex-1" :disabled="saving">
                                <span x-show="saving" class="loading loading-spinner loading-sm"></span>
                                <span x-text="i18n.save"></span>
                            </button>
                            <label for="app-drawer" class="btn btn-ghost" x-text="i18n.cancel"></label>
                        </div>
                    </form>
                    
                </div>
            </div>
        </div>
        
        <!-- Toast 通知 -->
        <div class="toast toast-end toast-bottom z-50">
            <template x-for="toast in toasts" :key="toast.id">
                <div class="alert" :class="'alert-' + toast.type">
                    <span x-text="toast.message"></span>
                </div>
            </template>
        </div>
        
    </div>


    <!-- 脚本 -->
    <script src="/js/app.js"></script>
    <script src="/js/alpine.min.js" defer></script>
    
    <!-- 服务端数据注入 -->
    <script>
        window.HOME4J_DATA = {
            isAdmin: {isAdmin},
            groups: [
                {#for group in groups}
                \{
                    id: {group.id},
                    name: "{group.name}",
                    icon: "{group.icon ?: 'folder'}",
                    sortOrder: {group.sortOrder},
                    visible: {group.visible},
                    bookmarks: [
                        {#for bookmark in group.bookmarks}
                        \{
                            id: {bookmark.id},
                            name: "{bookmark.name}",
                            url: "{bookmark.url}",
                            description: "{bookmark.description ?: ''}",
                            icon: "{bookmark.icon ?: 'link'}",
                            groupId: {group.id},
                            openInNewTab: {bookmark.openInNewTab},
                            visible: {bookmark.visible},
                            displayMode: "{bookmark.displayMode ?: 'icon'}",
                            backgroundImage: "{bookmark.backgroundImage ?: ''}"
                        \}{#if !bookmark_isLast},{/if}
                        {/for}
                    ]
                \}{#if !group_isLast},{/if}
                {/for}
            ]
        };
    </script>
    
    <!-- 返回顶部按钮 -->
    <button 
        x-data="{ showBackToTop: false }"
        x-init="window.addEventListener('scroll', () => { showBackToTop = window.scrollY > 300 })"
        x-show="showBackToTop"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-4"
        @click="window.scrollTo({ top: 0, behavior: 'smooth' })"
        class="fixed bottom-6 right-6 btn btn-circle btn-primary shadow-lg z-50"
        title="返回顶部">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m18 15-6-6-6 6"/>
        </svg>
    </button>
    
    <!-- 登录模态框 -->
    <dialog id="loginModal" class="modal modal-bottom sm:modal-middle">
        <div class="modal-box">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <h3 class="font-bold text-lg mb-4" x-data x-text="window.homeApp ? homeApp.i18n.login : '登录'">登录</h3>
            <form action="/j_security_check" method="post" class="space-y-4">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text" x-data x-text="window.homeApp ? homeApp.i18n.username : '用户名'">用户名</span>
                    </label>
                    <input type="text" name="j_username" required
                           class="input input-bordered w-full" 
                           placeholder="请输入用户名">
                </div>
                <div class="form-control">
                    <label class="label">
                        <span class="label-text" x-data x-text="window.homeApp ? homeApp.i18n.password : '密码'">密码</span>
                    </label>
                    <input type="password" name="j_password" required
                           class="input input-bordered w-full" 
                           placeholder="请输入密码">
                </div>
                <div class="form-control mt-6">
                    <button type="submit" class="btn btn-primary w-full">
                        <span x-data x-text="window.homeApp ? homeApp.i18n.loginBtn : '登录'">登录</span>
                    </button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
</body>
</html>
