<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}家谱管理系统{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
        body { font-family: 'Microsoft YaHei', sans-serif; }
        .sidebar { min-height: 100vh; background-color: #343a40; color: white; }
        .sidebar a { color: rgba(255,255,255,.8); text-decoration: none; padding: 10px 20px; display: block; }
        .sidebar a:hover { background-color: #495057; color: white; }
        .sidebar a.active { background-color: #0d6efd; color: white; }
        .content-area { padding: 20px; }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body class="bg-light">
    <div class="container-fluid">
        <div class="row">
            {% if session.get('user_id') %}
            <!-- Sidebar -->
            <div class="col-md-2 sidebar d-none d-md-block">
                <div class="py-4 text-center border-bottom mb-4">
                    <h4>家谱管理</h4>
                </div>
                <nav>
                    <a href="{{ url_for('index') }}" class="{% if request.endpoint == 'index' %}active{% endif %}">
                        <i class="bi bi-file-earmark-arrow-up me-2"></i> 上传管理
                    </a>
                    <a href="{{ url_for('members') }}" class="{% if request.endpoint == 'members' %}active{% endif %}">
                        <i class="bi bi-people me-2"></i> 成员列表
                    </a>
                    <a href="{{ url_for('tree') }}" class="{% if request.endpoint == 'tree' %}active{% endif %}">
                        <i class="bi bi-diagram-3 me-2"></i> 关系树状图
                    </a>
                    <div class="mt-5 border-top pt-3">
                        <p class="px-3 small text-muted">用户: {{ session['username'] }}</p>
                        <a href="{{ url_for('logout') }}" class="text-danger">
                            <i class="bi bi-box-arrow-right me-2"></i> 退出登录
                        </a>
                    </div>
                </nav>
            </div>
            {% endif %}

            <!-- Main Content -->
            <div class="col-md-{% if session.get('user_id') %}10{% else %}12{% endif %} content-area">
                {% with messages = get_flashed_messages() %}
                  {% if messages %}
                    {% for message in messages %}
                      <div class="alert alert-info alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>
                    {% endfor %}
                  {% endif %}
                {% endwith %}

                {% block content %}{% endblock %}
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>
