{{define "forms_detail"}}
  <link rel="stylesheet" href="/static/css/forms.css?v={{assetVer}}">
<div class="thm-forms">
  <div class="mod-back"><a href="/forms">← 返回收集表</a></div>

  <article class="forms-article">
    <div class="forms-article-kicker">
      {{if eq .Data.Form.Open 1}}<span class="forms-badge forms-badge-open">开放收集</span>{{else}}<span class="forms-badge forms-badge-closed">已关闭 · 停收回答</span>{{end}}
      <span class="forms-badge">{{len .Data.Form.FieldList}} 个字段</span>
    </div>
    <h1 class="forms-article-title">{{.Data.Form.Title}}</h1>
    <div class="forms-article-meta">
      <span>发起 · {{if .Data.Form.Author}}{{.Data.Form.Author}}{{else}}晴天{{end}}</span>
      <span>{{date .Data.Form.CreatedAt}}</span>
      <span>{{.Data.Form.Submissions}} 条回答</span>
    </div>
    {{if .Data.Form.Description}}
    <p class="forms-article-desc">{{.Data.Form.Description}}</p>
    {{end}}

    {{if .Data.Ok}}<div class="forms-tip forms-tip-ok">{{ico "check"}} 提交成功，你的回答已经收下了。谢谢配合。</div>{{end}}
    {{if .Data.Err}}<div class="forms-tip forms-tip-err">{{ico "close"}} {{.Data.Err}}</div>{{end}}

    {{if eq .Data.Form.Open 1}}
    <form class="forms-fill" method="post" action="/forms/{{.Data.Form.ID}}/submit">
      <div class="forms-fill-fields">
        {{range .Data.Form.FieldList}}
        <div class="field forms-field">
          <label class="forms-field-label">
            {{.Label}}{{if .Required}}<em class="forms-req">必填</em>{{end}}
          </label>

          {{if eq .Type "textarea"}}
          <textarea name="{{.Key}}" rows="4" maxlength="2000" placeholder="写在这里…"{{if .Required}} required{{end}}></textarea>

          {{else if eq .Type "radio"}}
          <div class="forms-opts">
            {{$fd := .}}
            {{range .Options}}
            <label class="forms-opt">
              <input type="radio" name="{{$fd.Key}}" value="{{.}}"{{if $fd.Required}} required{{end}}>
              <span class="forms-opt-text">{{.}}</span>
            </label>
            {{end}}
          </div>

          {{else if eq .Type "checkbox"}}
          <div class="forms-opts">
            {{$fd := .}}
            {{range .Options}}
            <label class="forms-opt">
              <input type="checkbox" name="{{$fd.Key}}" value="{{.}}">
              <span class="forms-opt-text">{{.}}</span>
            </label>
            {{end}}
          </div>

          {{else if eq .Type "select"}}
          <select name="{{.Key}}"{{if .Required}} required{{end}}>
            <option value="">请选择…</option>
            {{range .Options}}<option value="{{.}}">{{.}}</option>{{end}}
          </select>

          {{else if eq .Type "number"}}
          <input type="number" name="{{.Key}}" placeholder="填数字"{{if .Required}} required{{end}}>

          {{else if eq .Type "email"}}
          <input type="email" name="{{.Key}}" placeholder="name@example.com"{{if .Required}} required{{end}}>

          {{else if eq .Type "date"}}
          <input type="date" name="{{.Key}}"{{if .Required}} required{{end}}>

          {{else}}
          <input type="text" name="{{.Key}}" maxlength="200" placeholder="填在这里…"{{if .Required}} required{{end}}>
          {{end}}
        </div>
        {{end}}
      </div>

      {{captchaField}}

      <div class="forms-fill-foot">
        <span class="forms-fill-hint">带「必填」的项请填好；提交后不可自行修改。</span>
        <button class="btn btn-primary" type="submit">提交回答</button>
      </div>
    </form>
    {{else}}
    <div class="forms-closed">
      <div class="forms-closed-ico">{{ico "lock"}}</div>
      <h3>这张表已经关闭</h3>
      <p>发起人停收了，已提交的回答仍在后台留着。想联系他，就换个方式吧。</p>
      <a class="btn btn-ghost btn-sm" href="/forms">看看别的表</a>
    </div>
    {{end}}
  </article>

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