<!-- app/templates/statistics/user_activity.html -->
{% extends "base.html" %}

{% block title %}用户活跃度分析 - 统计分析{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/statistics.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/user_activity.css') }}">
{% endblock %}

{% block content %}
<div class="statistics-container">
    <div class="breadcrumb">
        <a href="{{ url_for('statistics.index') }}">统计分析</a> / 用户活跃度分析
    </div>

    <h1 class="page-title">用户活跃度分析</h1>

    <div class="chart-container">
        <h3>最活跃用户排行</h3>
        <canvas id="user-activity-chart"></canvas>
    </div>

    <div class="table-container">
        <h3>活跃用户列表</h3>
        <table class="data-table">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>借阅次数</th>
                </tr>
            </thead>
            <tbody id="user-table-body">
                <!-- 数据将通过JS动态填充 -->
                <tr class="loading-row">
                    <td colspan="4">加载中...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ url_for('static', filename='js/user_activity.js') }}"></script>
{% endblock %}
