{{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-paper">
    <header class="forms-paper-head">
      <span class="forms-file-no">{{ico "clipboard"}} 表单 No.{{.Data.Form.ID}}</span>
      {{if .Data.OpenNow}}
      <span class="forms-stamp" aria-hidden="true">开放</span>
      {{else}}
      <span class="forms-stamp is-closed" aria-hidden="true">{{.Data.ClosedReason}}</span>
      {{end}}
    </header>

    <h1 class="forms-paper-title">{{.Data.Form.Title}}</h1>

    <div class="forms-paper-meta">
      <span><em>发起</em>{{if .Data.Form.Author}}{{.Data.Form.Author}}{{else}}晴天{{end}}</span>
      <span><em>上架</em>{{date .Data.Form.CreatedAt}}</span>
      <span><em>回答</em>{{.Data.Form.Submissions}} 条</span>
      <span><em>字段</em>{{len .Data.Form.FieldList}} 项</span>
    </div>

    {{if .Data.Form.Description}}
    <p class="forms-paper-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 .Data.OpenNow}}
    <form class="forms-fill" method="post" action="/forms/{{.Data.Form.ID}}/submit">
      <div class="forms-fill-head">
        <span class="forms-fill-title">{{ico "list"}} 填写区</span>
        <span class="forms-fill-count">{{len .Data.Form.FieldList}} 项 · 带「必填」的请填好</span>
      </div>

      <div class="forms-fill-fields">
        {{range .Data.Form.FieldList}}
        {{if eq .Type "section"}}
        <div class="forms-section">
          <h3 class="forms-section-title">{{.Label}}</h3>
          {{if .Help}}<p class="forms-section-desc">{{.Help}}</p>{{end}}
        </div>

        {{else}}
        <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 .Placeholder}}{{.Placeholder}}{{else}}写在这里…{{end}}"{{if .Required}} required{{end}}>{{.Default}}</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 eq . $fd.Default}} checked{{end}}{{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="{{.}}"{{if eq . $fd.Default}} checked{{end}}>
              <span class="forms-opt-text">{{.}}</span>
            </label>
            {{end}}
          </div>

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

          {{else if eq .Type "rating"}}
          <div class="forms-rating">
            {{$fd := .}}
            {{range .ScaleList}}
            <label class="forms-rate">
              <input type="radio" name="{{$fd.Key}}" value="{{.}}"{{if $fd.Required}} required{{end}}>
              <span class="forms-rate-num">{{.}}</span>
            </label>
            {{end}}
          </div>

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

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

          {{else if eq .Type "tel"}}
          <input type="tel" name="{{.Key}}" value="{{.Default}}" placeholder="{{if .Placeholder}}{{.Placeholder}}{{else}}手机号{{end}}"{{if .Required}} required{{end}}>

          {{else if eq .Type "url"}}
          <input type="url" name="{{.Key}}" value="{{.Default}}" placeholder="{{if .Placeholder}}{{.Placeholder}}{{else}}https://…{{end}}"{{if .Required}} required{{end}}>

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

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

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

          {{if .Help}}<p class="forms-field-help">{{.Help}}</p>{{end}}
        </div>
        {{end}}
        {{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>这张表{{if .Data.ClosedReason}}{{.Data.ClosedReason}}{{else}}已关闭{{end}}</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>
<script>
  (function () {
    fetch('/whoami').then(function (r) { return r.json(); }).then(function (d) {
      if (!d || !d.logged_in || !d.email) return;
      var emails = document.querySelectorAll('form input[type="email"]');
      for (var i = 0; i < emails.length; i++) {
        emails[i].value = d.email;
        emails[i].readOnly = true;
        emails[i].style.opacity = '.75';
        emails[i].title = '已登录：自动使用账号邮箱，不可更改';
      }
      var hint = document.querySelector('.forms-fill-hint');
      if (hint && emails.length) hint.textContent = '带「必填」的项请填好；邮箱已按登录账号锁定，不可更改。提交后不可自行修改。';
    }).catch(function () {});
  })();
</script>
{{end}}