{{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>
    <div class="forms-hero-sign" aria-hidden="true">
      <span class="sig-cn">晴空收集</span>
      <span class="sig-en">COLLECT</span>
    </div>
    <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-list">
    {{range .Data.Forms}}
    <article class="forms-card {{if ne .Open 1}}is-closed{{end}}">
      <div class="forms-card-top">
        {{if eq .Open 1}}<span class="forms-badge forms-badge-open">开放收集</span>{{else}}<span class="forms-badge forms-badge-closed">已关闭</span>{{end}}
        <span class="forms-time">{{date .CreatedAt}}</span>
      </div>
      <h2 class="forms-title"><a href="/forms/{{.ID}}">{{.Title}}</a></h2>
      <p class="forms-desc">{{truncate .Description 120}}</p>
      <div class="forms-foot">
        <span class="forms-fields">{{len .FieldList}} 个字段</span>
        <span class="forms-subs">{{.Submissions}} 条回答</span>
        {{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}}