{% extends "base.html" %}

{% block content %}
<div class="breadcrumb">
    <a href="/boxes">箱子</a>
    <span>/</span>
    <strong>{{ "新建 Box" if not box else "编辑 Box" }}</strong>
</div>
<div class="page-header">
    <div>
        <div class="type-tag type-box">Box</div>
        <h1>{{ page_title }}</h1>
        <p class="muted">
            {% if box %}
            你当前正在编辑一个顶层箱子。
            {% else %}
            你当前正在创建一个新的顶层箱子。
            {% endif %}
        </p>
    </div>
    <a href="/boxes">返回箱子列表</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>{{ "创建顶层箱子" if not box else "编辑顶层箱子" }}</span>
        </div>
    </section>
    <label class="form-field">
        名称
        <input type="text" name="name" value="{{ box.name if box else '' }}" required autofocus>
    </label>
    <label class="form-field">
        房间
        <input type="text" name="room" value="{{ box.room if box and box.room else '' }}">
    </label>
    <label class="form-field">
        状态
        <input type="text" name="status" value="{{ box.status if box and box.status else '' }}">
    </label>
    <label class="form-field">
        备注
        <textarea name="note" rows="4">{{ box.note if box and box.note else '' }}</textarea>
    </label>
    <label class="form-field">
        图片
        <input type="file" name="image_file" accept="image/*">
    </label>
    {% if box and box.image_blob %}
    <section class="card">
        <p><strong>当前图片：</strong></p>
        <img src="/boxes/{{ box.id }}/image" alt="{{ box.name }}" class="detail-image">
        <button
            type="submit"
            class="link-button"
            formaction="/boxes/{{ box.id }}/image/delete"
            formmethod="post"
        >
            删除当前图片
        </button>
    </section>
    {% endif %}
    <button type="submit">{{ submit_label }}</button>
</form>
{% endblock %}