{% extends "base.html" %}

{% block content %}
<div class="breadcrumb">
    <a href="/boxes">箱子</a>
    <span>/</span>
    <strong>{{ box.name }}</strong>
</div>
<div class="page-header">
    <div>
        <div class="type-tag type-box">Box</div>
        <h1>{{ box.name }}</h1>
        <p class="muted">查看这个箱子的基本信息，以及它下面的直接物品。</p>
    </div>
    <div class="actions">
        <a class="button button-secondary button-small" href="/boxes">返回箱子列表</a>
        <a class="button button-secondary button-small" href="/search">去搜索</a>
        <a class="button button-primary" href="/boxes/{{ box.id }}/items/new">添加物品</a>
    </div>
</div>

<section class="card detail-card detail-card-compact">
    {% if box.image_blob %}
    <img src="/boxes/{{ box.id }}/image" alt="{{ box.name }}" class="detail-image detail-image-compact">
    {% endif %}
    <div class="detail-meta-grid">
        <p><strong>房间：</strong> {{ box.room or '-' }}</p>
        <p><strong>状态：</strong> {{ box.status or '-' }}</p>
        <p class="detail-note"><strong>备注：</strong> {{ box.note or '-' }}</p>
    </div>
    <div class="actions">
        <a class="button button-secondary button-small" href="/boxes/{{ box.id }}/edit">编辑箱子</a>
        <form method="post" action="/boxes/{{ box.id }}/delete">
            <button type="submit" class="button button-danger button-small">删除箱子</button>
        </form>
    </div>
</section>

<section class="stack">
    <div class="section-heading">
        <h2>内部物品</h2>
        <p class="muted">重点浏览区域，点击任意一行可进入物品详情。</p>
    </div>
    {% if box.items %}
        <div class="overview-grid">
        {% for item in box.items %}
        <article
            class="compact-row clickable-card overview-card {{ 'compact-row-container' if item.is_container else 'compact-row-item' }}"
            data-href="/items/{{ item.id }}"
            tabindex="0"
            role="link"
            aria-label="查看物品 {{ item.name }}"
        >
            {% if item.image_blob %}
            <img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="thumb-image compact-thumb">
            {% endif %}
            <div class="compact-main">
                <div class="row-title-line">
                    <span class="type-tag {{ 'type-container' if item.is_container else 'type-item' }}">
                        {{ "容器型 Item" if item.is_container else "Item" }}
                    </span>
                    <h3>{{ item.name }}</h3>
                </div>
                <div class="row-meta-grid">
                    <span>数量：{{ item.quantity if item.quantity is not none else 1 }}</span>
                    {% if item.note %}<span>有备注</span>{% endif %}
                </div>
                {% if item.note %}<p class="row-note">{{ item.note }}</p>{% endif %}
            </div>
        </article>
        {% endfor %}
        </div>
    {% else %}
    <section class="card">
        <p>这个箱子里还没有物品。</p>
    </section>
    {% endif %}
</section>
{% endblock %}