<!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}</title>
 
  <script src="/js/browser@4.js"></script>
    <link href="/css/daisyui@5.css" rel="stylesheet" type="text/css" />
    <link href="/css/themes.css" rel="stylesheet" type="text/css" />
    
    <script defer src="/js/alpine.min.js"></script>
</head>
<body class="min-h-screen bg-base-200">
    <!-- Navigation -->
    <div class="navbar bg-base-100 shadow-lg">
        <div class="flex-1">
            <a href="/admin" class="btn btn-ghost">← 返回</a>
            <span class="text-xl font-bold ml-2">分组管理</span>
        </div>
        <div class="flex-none">
            <button class="btn btn-primary" onclick="document.getElementById('addModal').showModal()">
                + 添加分组
            </button>
        </div>
    </div>

    <div class="container mx-auto px-4 py-8">
        <!-- Groups Table -->
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <div class="overflow-x-auto">
                    <table class="table table-zebra">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>图标</th>
                                <th>排序</th>
                                <th>状态</th>
                                <th>书签数</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {#for group in groups}
                            <tr>
                                <td>{group.id}</td>
                                <td class="font-medium">{group.name}</td>
                                <td>{group.icon ?: '-'}</td>
                                <td>{group.sortOrder}</td>
                                <td>
                                    {#if group.visible}
                                    <span class="badge badge-success">可见</span>
                                    {#else}
                                    <span class="badge badge-ghost">隐藏</span>
                                    {/if}
                                </td>
                                <td>{group.bookmarks.size()}</td>
                                <td class="space-x-2">
                                    <button class="btn btn-sm btn-ghost" onclick="editGroup({group.id}, '{group.name}', '{group.icon ?: ''}', {group.visible})">
                                        编辑
                                    </button>
                                    <button class="btn btn-sm btn-ghost text-error" onclick="confirmDelete({group.id}, '{group.name}')">
                                        删除
                                    </button>
                                </td>
                            </tr>
                            {#else}
                            <tr>
                                <td colspan="7" class="text-center py-8 text-base-content/60">
                                    暂无分组，点击右上角添加
                                </td>
                            </tr>
                            {/for}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Modal -->
    <dialog id="addModal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg mb-4">添加分组</h3>
            <form action="/admin/groups" method="post">
                <div class="form-control mb-4">
                    <label class="label"><span class="label-text">分组名称 *</span></label>
                    <input type="text" name="name" class="input input-bordered" required />
                </div>
                <div class="form-control mb-4">
                    <label class="label"><span class="label-text">图标（Lucide图标名称）</span></label>
                    <input type="text" name="icon" class="input input-bordered" placeholder="如: folder, star, heart" />
                </div>
                <div class="modal-action">
                    <button type="button" class="btn" onclick="document.getElementById('addModal').close()">取消</button>
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop"><button>close</button></form>
    </dialog>

    <!-- Edit Modal -->
    <dialog id="editModal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg mb-4">编辑分组</h3>
            <form id="editForm" method="post">
                <div class="form-control mb-4">
                    <label class="label"><span class="label-text">分组名称 *</span></label>
                    <input type="text" id="editName" name="name" class="input input-bordered" required />
                </div>
                <div class="form-control mb-4">
                    <label class="label"><span class="label-text">图标</span></label>
                    <input type="text" id="editIcon" name="icon" class="input input-bordered" />
                </div>
                <div class="form-control mb-4">
                    <label class="label cursor-pointer">
                        <span class="label-text">可见</span>
                        <input type="checkbox" id="editVisible" name="visible" value="true" class="checkbox" />
                    </label>
                </div>
                <div class="modal-action">
                    <button type="button" class="btn" onclick="document.getElementById('editModal').close()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop"><button>close</button></form>
    </dialog>

    <!-- Delete Confirm Modal -->
    <dialog id="deleteModal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg text-error">确认删除</h3>
            <p class="py-4">确定要删除分组 "<span id="deleteName"></span>" 吗？<br>该分组下的所有书签也将被删除！</p>
            <div class="modal-action">
                <button class="btn" onclick="document.getElementById('deleteModal').close()">取消</button>
                <form id="deleteForm" method="post" class="inline">
                    <button type="submit" class="btn btn-error">删除</button>
                </form>
            </div>
        </div>
        <form method="dialog" class="modal-backdrop"><button>close</button></form>
    </dialog>



    <script>
        function editGroup(id, name, icon, visible) {
            document.getElementById('editForm').action = '/admin/groups/' + id;
            document.getElementById('editName').value = name;
            document.getElementById('editIcon').value = icon;
            document.getElementById('editVisible').checked = visible;
            document.getElementById('editModal').showModal();
        }

        function confirmDelete(id, name) {
            document.getElementById('deleteForm').action = '/admin/groups/' + id + '/delete';
            document.getElementById('deleteName').textContent = name;
            document.getElementById('deleteModal').showModal();
        }
    </script>
</body>
</html>
