{{template "admin/layout/base.html" .}}
        <div class="page-header">
            <h1>分类管理</h1>
            <p class="page-desc">两级树形分类，仅叶子节点可被文章选择</p>
        </div>

        <div class="toolbar">
            <button class="btn btn-primary" id="btnNewCategory">+ 新建主分类</button>
        </div>

        <div id="categoryTree" class="category-tree">
            {{range .Tree}}
            <div class="cat-node cat-parent">
                <div class="cat-row">
                    <span class="cat-name">{{.Name}}</span>
                    <span class="cat-slug">/{{.Slug}}</span>
                    <span class="cat-actions">
                        <a href="#" class="cat-btn-edit" data-id="{{.ID}}" data-name="{{.Name}}" data-slug="{{.Slug}}" data-desc="{{.Description}}" data-sort="{{.Sort}}">编辑</a>
                        <a href="#" class="cat-btn-delete" data-id="{{.ID}}">删除</a>
                        <a href="#" class="cat-btn-add-child" data-parent-id="{{.ID}}">+ 子分类</a>
                    </span>
                </div>
                {{if .Children}}
                <div class="cat-children">
                    {{range .Children}}
                    <div class="cat-row cat-child">
                        <span class="cat-name">{{.Name}}</span>
                        <span class="cat-slug">/{{$.Slug}}/{{.Slug}}</span>
                        <span class="cat-actions">
                            <a href="#" class="cat-btn-edit" data-id="{{.ID}}" data-name="{{.Name}}" data-slug="{{.Slug}}" data-desc="{{.Description}}" data-sort="{{.Sort}}" data-parent-id="{{.ParentID}}">编辑</a>
                            <a href="#" class="cat-btn-delete" data-id="{{.ID}}">删除</a>
                        </span>
                    </div>
                    {{end}}
                </div>
                {{end}}
            </div>
            {{else}}
            <div class="cat-empty">暂无分类</div>
            {{end}}
        </div>

        <!-- 编辑弹窗 -->
        <div class="modal-overlay" id="modalOverlay">
            <div class="modal">
                <div class="modal-header">
                    <h3 id="modalTitle">新建分类</h3>
                    <button class="modal-close" id="modalClose">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="categoryForm">
                        <input type="hidden" id="catId">
                        <input type="hidden" id="catParentId">
                        <div class="form-group">
                            <label for="catName">名称</label>
                            <input type="text" id="catName" class="form-input" maxlength="50" required>
                        </div>
                        <div class="form-group">
                            <label for="catSlug">Slug（URL 标识）</label>
                            <input type="text" id="catSlug" class="form-input" maxlength="50" pattern="[a-z0-9\-]+">
                        </div>
                        <div class="form-group">
                            <label for="catDesc">简介</label>
                            <input type="text" id="catDesc" class="form-input" maxlength="200">
                        </div>
                        <div class="form-group">
                            <label for="catSort">排序</label>
                            <input type="number" id="catSort" class="form-input" value="0" min="0" style="width:100px">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" id="modalCancel">取消</button>
                    <button class="btn btn-primary" id="modalSave">保存</button>
                </div>
            </div>
        </div>

        <div class="toast" id="toast"></div>
{{template "admin/layout/footer.html" .}}