{% extends "base.html" %}

{% block content %}
<div class="breadcrumb">
    <a href="/boxes">箱子</a>
    <span>/</span>
    <a href="/boxes/{{ item.box.id }}">{{ item.box.name }}</a>
    <span>/</span>
    <strong>{{ item.name }}</strong>
</div>
<div class="page-header">
    <div>
        <div class="type-tag {{ 'type-container' if item.is_container else 'type-item' }}">
            {{ "容器型 Item" if item.is_container else "Item" }}
        </div>
        <h1>{{ item.name }}</h1>
        <p class="muted">位于箱子 <a href="/boxes/{{ item.box.id }}">{{ item.box.name }}</a> 中</p>
    </div>
    <div class="actions">
        <a href="/boxes/{{ item.box.id }}">返回箱子</a>
        <a href="/search">去搜索</a>
        <a href="/items/{{ item.id }}/edit">编辑物品</a>
    </div>
</div>

<section class="card">
    {% if item.image_blob %}
    <img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="detail-image">
    {% endif %}
    <p><strong>是否容器：</strong> {{ "是" if item.is_container else "否" }}</p>
    <p><strong>数量：</strong> {{ item.quantity if item.quantity is not none else '-' }}</p>
    <p><strong>备注：</strong> {{ item.note or '-' }}</p>
    <div class="actions">
        <form method="post" action="/items/{{ item.id }}/delete">
            <button type="submit" class="link-button">删除物品</button>
        </form>
    </div>
</section>

{% if item.is_container %}
<section class="stack">
    <div class="page-header">
        <h2>子物品</h2>
        <a class="button" href="/items/{{ item.id }}/subitems/new">添加子物品</a>
    </div>
    {% if item.subitems %}
        <div class="dense-list">
        {% for subitem in item.subitems %}
        <article class="compact-row compact-row-subitem">
            {% if subitem.image_blob %}
            <img src="/subitems/{{ subitem.id }}/image" alt="{{ subitem.name }}" class="thumb-image compact-thumb">
            {% endif %}
            <div class="compact-main">
                <div class="row-title-line">
                    <span class="type-tag type-subitem">SubItem</span>
                    <h3>{{ subitem.name }}</h3>
                </div>
                <div class="row-meta-grid">
                    <span>数量：{{ subitem.quantity if subitem.quantity is not none else 1 }}</span>
                    <span>上级容器：{{ item.name }}</span>
                </div>
                {% if subitem.note %}<p class="row-note">备注：{{ subitem.note }}</p>{% endif %}
            </div>
            <div class="row-actions">
                <a href="/subitems/{{ subitem.id }}/edit">编辑</a>
                <form method="post" action="/subitems/{{ subitem.id }}/delete">
                    <button type="submit" class="link-button">删除</button>
                </form>
            </div>
        </article>
        {% endfor %}
        </div>
    {% else %}
    <section class="card">
        <p>还没有子物品。</p>
    </section>
    {% endif %}
</section>
{% else %}
<section class="card">
    <p>这个物品不是容器，因此不能包含子物品。</p>
</section>
{% endif %}
{% endblock %}