<!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>
    <!-- 通用CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <!-- 页面特定CSS -->
    {% block head %}{% endblock %}
</head>
<body>
    <div class="app-container">
        <!-- 侧边导航栏 -->
        <nav class="sidebar">
            <div class="logo-container">
                <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo" class="logo">
                <h2>图书管理系统</h2>
            </div>
            <ul class="nav-links">
                <li class="{% if request.path == '/' %}active{% endif %}">
                    <a href="{{ url_for('index') }}"><i class="fas fa-home"></i> 首页</a>
                </li>
                <li class="{% if '/book/list' in request.path %}active{% endif %}">
                    <a href="{{ url_for('book.book_list') }}"><i class="fas fa-book"></i> 图书浏览</a>
                </li>
                <li class="{% if '/borrow' in request.path %}active{% endif %}">
                    <a href="#"><i class="fas fa-bookmark"></i> 我的借阅</a>
                </li>
                <li class="{% if '/announcement' in request.path %}active{% endif %}">
                    <a href="#"><i class="fas fa-bell"></i> 通知公告</a>
                </li>
                {% if current_user.role_id == 1 %}
                <li class="nav-category">管理功能</li>
                <li class="{% if '/user/manage' in request.path %}active{% endif %}">
                    <a href="#"><i class="fas fa-users"></i> 用户管理</a>
                </li>
                <li class="{% if '/book/list' in request.path %}active{% endif %}">
                    <a href="{{ url_for('book.book_list') }}"><i class="fas fa-layer-group"></i> 图书管理</a>
                </li>
                <li class="{% if '/borrow/manage' in request.path %}active{% endif %}">
                    <a href="#"><i class="fas fa-exchange-alt"></i> 借阅管理</a>
                </li>
                <li class="{% if '/inventory' in request.path %}active{% endif %}">
                    <a href="#"><i class="fas fa-warehouse"></i> 库存管理</a>
                </li>
                <li class="{% if '/statistics' in request.path %}active{% endif %}">
                    <a href="#"><i class="fas fa-chart-bar"></i> 统计分析</a>
                </li>
                <li class="{% if '/log' in request.path %}active{% endif %}">
                    <a href="#"><i class="fas fa-history"></i> 日志管理</a>
                </li>
                {% endif %}
            </ul>
        </nav>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航 -->
            <header class="top-bar">
                <div class="search-container">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" placeholder="搜索图书..." class="search-input">
                </div>
                <div class="user-menu">
                    <div class="notifications">
                        <i class="fas fa-bell"></i>
                        <span class="badge">3</span>
                    </div>
                    <div class="user-info">
                        <div class="user-avatar">
                            {{ current_user.username[0] }}
                        </div>
                        <div class="user-details">
                            <span class="user-name">{{ current_user.username }}</span>
                            <span class="user-role">{{ '管理员' if current_user.role_id == 1 else '普通用户' }}</span>
                        </div>
                        <div class="dropdown-menu">
                            <a href="#"><i class="fas fa-user-circle"></i> 个人中心</a>
                            <a href="#"><i class="fas fa-cog"></i> 设置</a>
                            <a href="{{ url_for('user.logout') }}"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 内容区 - 这里是核心变化 -->
            <div class="content-wrapper">
                {% block content %}
                <!-- 子模板将在这里添加内容 -->
                {% endblock %}
            </div>
        </main>
    </div>

    <!-- 通用JavaScript -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 用户菜单下拉
            const userInfo = document.querySelector('.user-info');
            userInfo.addEventListener('click', function(e) {
                userInfo.classList.toggle('active');
            });

            // 点击其他区域关闭下拉菜单
            document.addEventListener('click', function(e) {
                if (!userInfo.contains(e.target)) {
                    userInfo.classList.remove('active');
                }
            });
        });
    </script>

    <!-- 页面特定JavaScript -->
    {% block scripts %}{% endblock %}
</body>
</html>
