{% extends "base.html" %}

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

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

<section class="stack">
    <h2>物品</h2>
    {% if box.items %}
        {% for item in box.items %}
        <article class="card">
            {% if item.image_blob %}
            <img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="thumb-image">
            {% endif %}
            <h3><a href="/items/{{ item.id }}">{{ item.name }}</a></h3>
            <p><strong>是否容器：</strong> {{ "是" if item.is_container else "否" }}</p>
            {% if item.quantity is not none %}<p><strong>数量：</strong> {{ item.quantity }}</p>{% endif %}
            {% if item.note %}<p><strong>备注：</strong> {{ item.note }}</p>{% endif %}
            <div class="actions">
                <a href="/items/{{ item.id }}">查看详情</a>
                <a href="/items/{{ item.id }}/edit">编辑</a>
                {% if item.is_container %}
                <a href="/items/{{ item.id }}">查看内部内容</a>
                {% endif %}
                <form method="post" action="/items/{{ item.id }}/delete">
                    <button type="submit" class="link-button">删除</button>
                </form>
            </div>
        </article>
        {% endfor %}
    {% else %}
    <section class="card">
        <p>这个箱子里还没有物品。</p>
    </section>
    {% endif %}
</section>
{% endblock %}