{{define "forms_index"}}
  <link rel="stylesheet" href="/static/css/forms.css?v={{assetVer}}">
<div class="thm-forms">
  <!-- ===== 表头 hero：一张打了装订孔的收件纸，角上压着一枚「收集」印章 ===== -->
  <header class="forms-hero">
    <div class="forms-hero-bg" aria-hidden="true">
      <span class="forms-grid"></span>
      <span class="forms-sheet s1"></span>
      <span class="forms-sheet s2"></span>
      <span class="forms-sheet s3"></span>
    </div>
    <span class="forms-seal" aria-hidden="true">收集</span>
    <span class="forms-kicker">{{ico "clipboard"}} 表单 · 一张表收齐一件事</span>
    <h1 class="forms-hero-title">要问的，<br>一次问清</h1>
    <p class="forms-hero-sub">
      报名、登记、反馈，别再在群里一条条翻。字段自己定——从单行文本到单选、评分、说明文字，
      <strong>必填与选项写清</strong>，大家对着表填就行——答完即存，谁也不用再问「你那条填了吗」。
    </p>
    <div class="forms-hero-feet">
      <span>{{ico "clipboard"}} 共 {{.Data.Total}} 张表</span>
      <span>{{ico "list"}} 十三种字段随你挑</span>
      <span>{{ico "download"}} 回答可导 CSV</span>
      <span>{{ico "lock"}} 提交带验证码</span>
    </div>
  </header>

  <!-- ===== 收集箱：一条目 = 一页纸，竖着摞在档案盒里 ===== -->
  <div class="forms-stack">
    {{range .Data.Forms}}
    <article class="forms-row {{if ne .Open 1}}is-closed{{end}}">
      <div class="forms-row-mark" aria-hidden="true">
        {{if eq .Open 1}}<span class="forms-badge forms-badge-open">开放收集</span>{{else}}<span class="forms-badge forms-badge-closed">已关闭</span>{{end}}
      </div>
      <div class="forms-row-body">
        <h2 class="forms-title"><a href="/forms/{{.ID}}">{{.Title}}</a></h2>
        <p class="forms-desc">{{truncate .Description 140}}</p>
        <div class="forms-row-meta">
          <span class="forms-fields">{{ico "list"}} {{len .FieldList}} 个字段</span>
          <span class="forms-subs">{{ico "clipboard"}} {{.Submissions}} 条回答</span>
          <span class="forms-time">{{ico "clock"}} {{date .CreatedAt}}</span>
        </div>
      </div>
      <div class="forms-row-act">
        {{if eq .Open 1}}<a class="forms-more" href="/forms/{{.ID}}">去填写 →</a>{{else}}<span class="forms-more is-off">已停止收集</span>{{end}}
      </div>
    </article>
    {{else}}
    <div class="mod-empty">
      <h3>收集箱还空着</h3>
      <p>等第一张收集表上架。</p>
    </div>
    {{end}}
  </div>

  {{template "pagination" .}}
  {{template "module_meta" .}}

  <!-- ===== 页尾：了解 Pro 授权 ===== -->
  <div class="forms-pro">
    <a href="/pro">了解 Pro 授权</a>
  </div>
</div>
{{end}}