<!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">
        <!-- Filter -->
        <div class="mb-4">
            <form class="flex gap-2">
                <select name="groupId" class="select select-bordered" onchange="this.form.submit()">
                    <option value="">全部分组</option>
                    {#for group in groups}
                    <option value="{group.id}" {#if selectedGroupId == group.id}selected{/if}>{group.name}</option>
                    {/for}
                </select>
            </form>
        </div>

        <!-- Bookmarks 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>URL</th>
                                <th>分组</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {#for bookmark in bookmarks}
                            <tr>
                                <td>{bookmark.id}</td>
                                <td class="font-medium">{bookmark.name}</td>
                                <td class="max-w-xs truncate">
                                    <a href="{bookmark.url}" target="_blank" class="link link-primary">{bookmark.url}</a>
                                </td>
                                <td>{bookmark.group?.name ?: '未分组'}</td>
                                <td>
                                    {#if bookmark.visible}
                                    <span class="badge badge-success">可见</span>
                                    {#else}
                                    <span class="badge badge-ghost">隐藏</span>
                                    {/if}
                                </td>
                                <td class="space-x-2">
                                    <button class="btn btn-sm btn-ghost" 
                                            onclick="editBookmark({bookmark.id}, {bookmark.group?.id ?: 'null'}, '{bookmark.name}', '{bookmark.url}', '{bookmark.description ?: ''}', '{bookmark.icon ?: ''}', {bookmark.visible}, {bookmark.openInNewTab})">
                                        编辑
                                    </button>
                                    <button class="btn btn-sm btn-ghost text-error" onclick="confirmDelete({bookmark.id}, '{bookmark.name}')">
                                        删除
                                    </button>
                                </td>
                            </tr>
                            {#else}
                            <tr>
                                <td colspan="6" 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/bookmarks" method="post">
                <div class="form-control mb-4">
                    <label class="label"><span class="label-text">所属分组</span></label>
                    <select name="groupId" class="select select-bordered">
                        <option value="">不分组</option>
                        {#for group in groups}
                        <option value="{group.id}">{group.name}</option>
                        {/for}
                    </select>
                </div>
                <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">URL *</span></label>
                    <input type="url" name="url" class="input input-bordered" required placeholder="https://" />
                </div>
                <div class="form-control mb-4">
                    <label class="label"><span class="label-text">描述</span></label>
                    <input type="text" name="description" class="input input-bordered" />
                </div>
                <div class="form-control mb-4">
                    <label class="label"><span class="label-text">图标</span></label>
                    <input type="text" name="icon" class="input input-bordered" placeholder="Lucide图标名称" />
                </div>
                <div class="form-control mb-4">
                    <label class="label cursor-pointer">
                        <span class="label-text">在新标签页打开</span>
                        <input type="checkbox" name="openInNewTab" value="true" class="checkbox" checked />
                    </label>
                </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>
                    <select id="editGroupId" name="groupId" class="select select-bordered">
                        <option value="">不分组</option>
                        {#for group in groups}
                        <option value="{group.id}">{group.name}</option>
                        {/for}
                    </select>
                </div>
                <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">URL *</span></label>
                    <input type="url" id="editUrl" name="url" 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="editDescription" name="description" class="input input-bordered" />
                </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="form-control mb-4">
                    <label class="label cursor-pointer">
                        <span class="label-text">在新标签页打开</span>
                        <input type="checkbox" id="editOpenInNewTab" name="openInNewTab" 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>" 吗？</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 editBookmark(id, groupId, name, url, description, icon, visible, openInNewTab) {
            document.getElementById('editForm').action = '/admin/bookmarks/' + id;
            document.getElementById('editGroupId').value = groupId || '';
            document.getElementById('editName').value = name;
            document.getElementById('editUrl').value = url;
            document.getElementById('editDescription').value = description;
            document.getElementById('editIcon').value = icon;
            document.getElementById('editVisible').checked = visible;
            document.getElementById('editOpenInNewTab').checked = openInNewTab;
            document.getElementById('editModal').showModal();
        }

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