{% extends "base.html" %}

{% block content %}
<div class="breadcrumb">
    <span>首页</span>
    <span>/</span>
    <strong>箱子</strong>
</div>
<div class="page-header">
    <div>
        <div class="type-tag type-box">Box</div>
        <h1>箱子总览</h1>
        <p class="muted">这里管理顶层搬家容器，例如纸箱、行李箱或大收纳箱。</p>
    </div>
    <a class="button button-primary" href="/boxes/new">新建箱子</a>
</div>

<section class="stack summary-section">
    <div class="section-heading">
        <h2>当前概览</h2>
        <p class="muted">快速查看当前装箱记录的核心统计。</p>
    </div>
    <section class="card summary-block">
        <ul class="summary-list">
            <li><strong>箱子总数：</strong>{{ summary.box_count }}</li>
            <li><strong>物品总数（不含子物品）：</strong>{{ summary.item_count }}</li>
            <li><strong>物品总数（含子物品）：</strong>{{ summary.item_and_subitem_count }}</li>
            <li><strong>平均每箱物品数：</strong>{{ summary.avg_items_per_box }}</li>
            <li><strong>平均每个容器型 Item 的子物品数：</strong>{{ summary.avg_subitems_per_container_item }}</li>
        </ul>
    </section>
</section>

{% if boxes %}
<div class="overview-grid">
    {% for box in boxes %}
    <section
        class="compact-row compact-row-box clickable-card overview-card overview-card-box"
        data-href="/boxes/{{ box.id }}"
        tabindex="0"
        role="link"
        aria-label="查看箱子 {{ box.name }}"
    >
        <div class="compact-main">
            <div class="row-title-line">
                <span class="type-tag type-box">Box</span>
                <h2>{{ box.name }}</h2>
            </div>
            <div class="row-meta-grid">
                <span>物品数：{{ box.items|length }}</span>
            </div>
            {% if box.note %}<p class="row-note">{{ box.note }}</p>{% endif %}
        </div>
    </section>
    {% endfor %}
</div>
{% else %}
<section class="card">
    <p>还没有箱子。</p>
    <a class="button button-primary" href="/boxes/new">创建第一个箱子</a>
</section>
{% endif %}
{% endblock %}