{% 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>

{% 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>
                <span>房间：{{ box.room or '-' }}</span>
                <span>状态：{{ box.status or '-' }}</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 %}