{% 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 class="button button-secondary button-small" href="/boxes/{{ item.box.id }}">返回箱子</a>
        <a class="button button-secondary button-small" href="/search">去搜索</a>
        <a class="button button-secondary button-small" href="/items/{{ item.id }}/edit">编辑物品</a>
    </div>
</div>

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

{% if item.is_container %}
<section class="stack">
    <div class="page-header">
        <div class="section-heading">
            <h2>内部子物品</h2>
            <p class="muted">当前容器里装的内容，点击任意一行可进入对应编辑上下文。</p>
        </div>
        <a class="button button-primary" href="/items/{{ item.id }}/subitems/new">添加子物品</a>
    </div>
    {% if item.subitems %}
        <div class="overview-grid">
        {% for subitem in item.subitems %}
        <article
            class="compact-row clickable-card compact-row-subitem overview-card"
            data-href="/subitems/{{ subitem.id }}/edit"
            tabindex="0"
            role="link"
            aria-label="查看子物品 {{ subitem.name }}"
        >
            {% 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 class="actions">
                    <form method="post" action="/subitems/{{ subitem.id }}/delete">
                        <button type="submit" class="button button-danger button-small">删除子物品</button>
                    </form>
                </div>
            </div>
        </article>
        {% endfor %}
        </div>
    {% else %}
    <section class="card">
        <p>还没有子物品。</p>
    </section>
    {% endif %}
</section>
{% else %}
<section class="card">
    <p>这个物品不是容器，因此不能包含子物品。</p>
</section>
{% endif %}
{% endblock %}