{% extends "base.html" %}

{% block title %}家谱管理系统 - Web版{% endblock %}

{% block content %}
<div class="header">
    <h1>家谱管理系统 v1.0</h1>
    <div class="toolbar">
        <button onclick="showWelcomeDialog()" id="btn-create-root" style="display:none;">创建家谱</button>
        <button onclick="showAddDialog()">添加成员</button>
        <button onclick="location.reload()">刷新</button>
    </div>
</div>

<div class="main-layout">
    <!-- 左侧：家谱树 -->
    <div class="tree-panel">
        <h3>家谱树</h3>
        <div id="tree-container"></div>
    </div>

    <!-- 右侧：详情面板 -->
    <div class="detail-panel" id="detail-panel">
        <h3>成员详情</h3>
        <div id="detail-content">
            <p class="empty-tip">请选择一个成员查看详情</p>
        </div>
    </div>
</div>

<!-- 创建家谱对话框 -->
<div class="modal" id="welcome-modal">
    <div class="modal-content">
        <h3>创建家谱</h3>
        <div class="form-group">
            <label>姓氏：</label>
            <input type="text" id="root-surname" placeholder="如：蔡">
        </div>
        <div class="form-group">
            <label>堂号/郡望：</label>
            <input type="text" id="root-tanghao" placeholder="如：济阳堂">
        </div>
        <div class="form-group">
            <label>始祖名字：</label>
            <input type="text" id="root-name" placeholder="始祖姓名">
        </div>
        <div class="form-group">
            <label>始祖简介：</label>
            <textarea id="root-summary" rows="3"></textarea>
        </div>
        <div class="modal-buttons">
            <button onclick="createRoot()">创建</button>
            <button onclick="closeModal('welcome-modal')">取消</button>
        </div>
    </div>
</div>

<!-- 添加成员对话框 -->
<div class="modal" id="add-modal">
    <div class="modal-content">
        <h3>添加成员</h3>
        <div class="form-group">
            <label>父节点：</label>
            <select id="add-parent"></select>
        </div>
        <div class="form-group">
            <label>性别：</label>
            <select id="add-gender">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="form-group">
            <label>名字：</label>
            <input type="text" id="add-name" placeholder="姓名">
        </div>
        <div class="form-group">
            <label>称呼（自动）：</label>
            <input type="text" id="add-title" placeholder="自动生成" readonly>
        </div>
        <div class="form-group">
            <label>详细：</label>
            <textarea id="add-detail" rows="3"></textarea>
        </div>
        <div class="form-group">
            <label>出生日期：</label>
            <input type="text" id="add-csrq" placeholder="YYYY-MM-DD">
        </div>
        <div class="form-group">
            <label>逝世日期：</label>
            <input type="text" id="add-ssj" placeholder="YYYY-MM-DD">
        </div>
        <div class="modal-buttons">
            <button onclick="addMember()">添加</button>
            <button onclick="closeModal('add-modal')">取消</button>
        </div>
    </div>
</div>

<!-- 编辑成员对话框 -->
<div class="modal" id="edit-modal">
    <div class="modal-content">
        <h3>编辑成员</h3>
        <input type="hidden" id="edit-bx">
        <div class="form-group">
            <label>名字：</label>
            <input type="text" id="edit-name">
        </div>
        <div class="form-group">
            <label>称呼：</label>
            <textarea id="edit-title" rows="2"></textarea>
        </div>
        <div class="form-group">
            <label>详细：</label>
            <textarea id="edit-detail" rows="3"></textarea>
        </div>
        <div class="form-group">
            <label>出生日期：</label>
            <input type="text" id="edit-csrq">
        </div>
        <div class="form-group">
            <label>逝世日期：</label>
            <input type="text" id="edit-ssj">
        </div>
        <div class="modal-buttons">
            <button onclick="updateMember()">保存</button>
            <button onclick="closeModal('edit-modal')">取消</button>
        </div>
    </div>
</div>

<!-- 管理子女对话框 -->
<div class="modal" id="manage-modal">
    <div class="modal-content wide">
        <h3>管理子女</h3>
        <div id="children-list"></div>
        <div class="modal-buttons">
            <button onclick="closeModal('manage-modal')">关闭</button>
        </div>
    </div>
</div>
{% endblock %}