{include file="common/header" /}
<main class="container guestbook-page">
    <div class="page-head">
        <h1>留言板</h1>
        <p>欢迎留下建议或合作意向，我们会尽快回复。</p>
    </div>
    <div class="guestbook-layout">
        <!-- 表单标签：读取「模型管理 → 表单模型」字段；独立留言页默认来源为“联系我们”。 -->
        {pycms:guestbookform /}
        <div class="guestbook-list">
            <h2>最新留言</h2>
            <!-- 留言列表标签：字段定义来自表单模型，fields 可循环输出字段名与格式化值。 -->
            {pycms:guestbook num="30" id="message" empty="还没有留言，来抢沙发吧。"}
            <article class="guestbook-item">
                <div class="guestbook-meta">
                    <strong>{$message.name}</strong>
                    <!-- 日期标签：格式化留言时间。 -->
                    <span>{pycms:date name="$message.create_time" format="Y-m-d H:i" /}</span>
                </div>
                <dl class="guestbook-fields">
                    <!-- 字段循环标签：遍历表单模型字段，输出字段名与格式化后的值。 -->
                    {pycms:volist name="$message.fields" id="field"}
                    {if !$field.empty}
                    <div class="guestbook-field">
                        <dt>{$field.name}</dt>
                        <dd>{$field.display|raw}</dd>
                    </div>
                    {/if}
                    {/pycms:volist}
                </dl>
            </article>
            {/pycms:guestbook}
        </div>
    </div>
</main>
<style>
.guestbook-form .select,
.guestbook-form .file-input { width: 100%; padding: 10px 12px; border: 1px solid #dbe5ec; border-radius: 9px; font: inherit; font-size: 14px; background: #fff; }
.guestbook-form .choice-list { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 4px 0; }
.guestbook-form .choice { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text); }
.guestbook-form .upload-current { margin-top: 6px; font-size: 12px; color: var(--muted); }
.guestbook-form .upload-current a { color: var(--primary); }
.guestbook-fields { margin: 10px 0 0; display: grid; gap: 8px; }
.guestbook-field { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: start; }
.guestbook-field dt { color: var(--muted); font-size: 12px; line-height: 1.8; }
.guestbook-field dd { margin: 0; color: var(--text); font-size: 14px; line-height: 1.8; word-break: break-word; }
.guestbook-field dd img { max-width: 100%; border-radius: 8px; }
.field-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.field-gallery img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.field-files, .field-array { margin: 0; padding-left: 18px; }
.field-keyvalue { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0; }
.field-keyvalue dt { color: var(--muted); }
.field-keyvalue dd { margin: 0; }
.field-tag { display: inline-block; margin: 0 6px 4px 0; padding: 2px 8px; border-radius: 999px; background: var(--primary-soft, #e8f5f3); color: var(--primary, #0e7490); font-size: 12px; }
.field-image { max-width: 240px; border-radius: 8px; }
.field-media { max-width: 100%; border-radius: 8px; }
</style>
{include file="common/footer" /}