<!-- app/templates/statistics/overdue_analysis.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/overdue_analysis.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="stats-cards">
        <div class="stats-card" id="total-borrows">
            <div class="card-value">0</div>
            <div class="card-title">总借阅数</div>
        </div>

        <div class="stats-card" id="current-overdue">
            <div class="card-value">0</div>
            <div class="card-title">当前逾期数</div>
        </div>

        <div class="stats-card" id="returned-overdue">
            <div class="card-value">0</div>
            <div class="card-title">历史逾期数</div>
        </div>

        <div class="stats-card" id="overdue-rate">
            <div class="card-value">0%</div>
            <div class="card-title">总逾期率</div>
        </div>
    </div>

    <div class="chart-row">
        <div class="chart-container half">
            <h3>逾期时长分布</h3>
            <canvas id="overdue-range-chart"></canvas>
        </div>

        <div class="chart-container half">
            <h3>逾期状态分布</h3>
            <canvas id="overdue-status-chart"></canvas>
        </div>
    </div>
</div>
{% endblock %}

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