{% extends "base.html" %}

{% block content %}
<div class="breadcrumb">
    <a href="/boxes">箱子</a>
    <span>/</span>
    <a href="/boxes/{{ box.id }}">{{ box.name }}</a>
    <span>/</span>
    <strong>{{ "新建 Item" if not item else "编辑 Item" }}</strong>
</div>
<div class="page-header">
    <div>
        <div class="type-tag {{ 'type-container' if item and item.is_container else 'type-item' }}">
            {{ "容器型 Item" if item and item.is_container else "Item" }}
        </div>
        <h1>{{ page_title }}</h1>
        <p class="muted">所属箱子：<a href="/boxes/{{ box.id }}">{{ box.name }}</a></p>
        <p class="muted">
            {% if item %}
            你当前正在编辑这个物品，并可决定它是否是一个小容器。
            {% else %}
            你当前正在往这个箱子里添加一个 Item，可选择它是普通物品还是小容器。
            {% endif %}
        </p>
    </div>
    <a class="button button-secondary button-small" href="/boxes/{{ box.id }}">返回箱子</a>
</div>

<form method="post" action="{{ form_action }}" class="stack form-panel" enctype="multipart/form-data">
    <section class="context-panel">
        <div class="context-title">当前上下文</div>
        <div class="context-body">
            <span class="type-tag type-box">Box</span>
            <span>{{ box.name }}</span>
        </div>
        <div class="context-body">
            <span class="type-tag {{ 'type-container' if item and item.is_container else 'type-item' }}">
                {{ "容器型 Item" if item and item.is_container else "Item" }}
            </span>
            <span>{{ "创建新的二级物品" if not item else "编辑当前二级物品" }}</span>
        </div>
    </section>
    <label class="form-field">
        名称
        <input type="text" name="name" value="{{ item.name if item else '' }}" required autofocus>
    </label>
    <label class="form-field">
        图片
        <input type="file" name="image_file" accept="image/*">
    </label>
    {% if item and item.image_blob %}
    <section class="card">
        <p><strong>当前图片：</strong></p>
        <img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="detail-image">
        <button
            type="submit"
            class="button button-danger button-small"
            formaction="/items/{{ item.id }}/image/delete"
            formmethod="post"
        >
            删除当前图片
        </button>
    </section>
    {% endif %}
    <label class="form-field">
        数量
        <input type="number" name="quantity" min="0" value="{{ item.quantity if item and item.quantity is not none else '1' }}">
    </label>
    <label class="checkbox-row">
        <input type="checkbox" name="is_container" {% if item and item.is_container %}checked{% endif %}>
        这个物品本身是一个小容器
    </label>
    <div class="checkbox-help">
        勾选后，这个 Item 将作为“第二层容器”，后续可以继续往里面添加最后一级的 SubItem。
    </div>
    <label class="form-field">
        备注
        <textarea name="note" rows="4">{{ item.note if item and item.note else '' }}</textarea>
    </label>
    <div class="form-actions">
        <button type="submit" name="submit_action" value="save" class="button button-primary">{{ submit_label }}</button>
        {% if not item %}
        <button type="submit" name="submit_action" value="save_and_add_next" class="button button-secondary">
            保存并添加下一个
        </button>
        {% endif %}
    </div>
</form>
{% endblock %}