{{define "events_detail"}}
  <link rel="stylesheet" href="/static/css/events.css?v={{assetVer}}">
<div class="thm-events">
  <div class="mod-back"><a href="/events">← 返回活动列表</a></div>

  <div class="mod-cols">
    <!-- 主栏：活动说明 -->
    <div class="mod-main">
      <article class="event-article">
        <div class="event-article-kicker">
          <span class="event-mode event-mode-{{.Data.Event.Mode}}">{{if eq .Data.Event.Mode "offline"}}线下活动{{else if eq .Data.Event.Mode "hybrid"}}同场直播{{else}}线上活动{{end}}</span>
          <span class="event-state event-state-{{.Data.Event.State}}">{{.Data.Event.StateText}}</span>
          {{if .Data.Full}}<span class="event-mode event-mode-full">名额已满</span>{{end}}
          <span class="event-badge">共 {{.Data.SignupCount}} 人报名</span>
        </div>
        <h1 class="event-article-title">{{.Data.Event.Title}}</h1>
        <div class="event-article-meta">
          <span>{{ico "clock"}} {{dateTime .Data.Event.StartAt}}{{if .Data.Event.EndAt}} – {{dateTime .Data.Event.EndAt}}{{end}}</span>
          {{if ne .Data.Event.Mode "online"}}
          <span>{{ico "pin"}} {{if .Data.Event.City}}{{.Data.Event.City}} · {{end}}{{.Data.Event.Location}}</span>
          {{else}}
          <span>{{ico "globe"}} 线上开讲</span>
          {{end}}
          <span>{{ico "eye"}} {{.Data.Event.Views}} 次浏览</span>
          <span>{{ico "users"}} 发起 · {{.Data.Event.Author}}</span>
          <span>{{template "fav_button" dict "VD" . "Type" "events" "Key" (printf "%d" .Data.Event.ID) "Title" .Data.Event.Title "URL" (printf "/events/%d" .Data.Event.ID)}}</span>
        </div>
        {{if .Data.Event.Summary}}<p class="event-article-summary">{{.Data.Event.Summary}}</p>{{end}}
        {{if .Data.Event.Cover}}
        <div class="event-article-cover">
          <img src="{{.Data.Event.Cover}}" alt="{{.Data.Event.Title}}">
        </div>
        {{end}}
      </article>

      <!-- 参加方式：线上 / 线下 / 同场直播 三种形态各说各的 -->
      <div class="mod-panel" style="margin-top:22px;">
        <h3 class="mod-panel-title">参加方式</h3>
        {{if eq .Data.Event.Mode "offline"}}
        <p style="margin:0 0 12px;font-size:14px;line-height:1.95;color:var(--ink-soft);">
          这是一场线下活动。报名成功后你会拿到一张<strong>专属报名凭证</strong>，
          上面印着独一无二的报名码与二维码；到场时把它出示给发起人，扫一下即完成签到。
        </p>
        <div class="event-facts">
          <div class="event-fact"><span class="event-fact-k">第一步</span><span class="event-fact-v">填写称呼报名，领取凭证</span></div>
          <div class="event-fact"><span class="event-fact-k">第二步</span><span class="event-fact-v">妥善保存报名码</span></div>
          <div class="event-fact"><span class="event-fact-k">第三步</span><span class="event-fact-v">到场出示二维码，扫码签到</span></div>
        </div>
        {{else if eq .Data.Event.Mode "hybrid"}}
        <p style="margin:0 0 12px;font-size:14px;line-height:1.95;color:var(--ink-soft);">
          这是一场<strong>同场直播</strong>活动：到得了现场的照常扫码签到，来不了的报名后在凭证页
          <strong>凭码打开观看链接</strong>；活动结束发起人回填回放，没赶上的也能凭码补看。
        </p>
        <div class="event-facts">
          <div class="event-fact"><span class="event-fact-k">到场</span><span class="event-fact-v">凭证页二维码，现场扫码签到</span></div>
          <div class="event-fact"><span class="event-fact-k">线上</span><span class="event-fact-v">凭证页凭码进入直播间</span></div>
          <div class="event-fact"><span class="event-fact-k">回放</span><span class="event-fact-v">结束后凭同一张凭证补看</span></div>
        </div>
        {{else}}
        <p style="margin:0 0 12px;font-size:14px;line-height:1.95;color:var(--ink-soft);">
          这是一场线上活动。报名成功后即刻获得<strong>专属报名凭证</strong>——观看链接只在你的凭证页亮出，
          到点凭码进入；开播前可预约提醒，结束后回填的回放同样只对持码者可见。
        </p>
        <div class="event-facts">
          <div class="event-fact"><span class="event-fact-k">第一步</span><span class="event-fact-v">填写称呼报名</span></div>
          <div class="event-fact"><span class="event-fact-k">第二步</span><span class="event-fact-v">凭证页领取观看链接</span></div>
          <div class="event-fact"><span class="event-fact-k">第三步</span><span class="event-fact-v">结束后凭码补看回放</span></div>
        </div>
        {{end}}
      </div>

      {{if .Data.Deadline}}
      <div class="mod-panel" style="margin-top:16px;border-left:3px solid {{if .Data.CanSignup}}#f59e0b{{else}}#dc2626{{end}};">
        <h3 class="mod-panel-title">报名截止</h3>
        <p style="margin:0;font-size:14px;color:var(--ink-soft);">{{if .Data.CanSignup}}报名将于 <strong>{{dateTime .Data.Deadline}}</strong> 截止，过时不再收。{{else}}报名已于 {{dateTime .Data.Deadline}} 截止。{{end}}</p>
      </div>
      {{end}}

      {{if ne .Data.Event.Mode "online"}}
      <div class="mod-panel" style="margin-top:16px;">
        <h3 class="mod-panel-title">到场指引</h3>
        <div class="event-facts">
          {{if .Data.Event.City}}<div class="event-fact"><span class="event-fact-k">城市</span><span class="event-fact-v">{{.Data.Event.City}}</span></div>{{end}}
          <div class="event-fact"><span class="event-fact-k">地址</span><span class="event-fact-v">{{.Data.Event.Location}}</span></div>
          {{if .Data.Event.AddrNote}}<div class="event-fact"><span class="event-fact-k">备注</span><span class="event-fact-v">{{.Data.Event.AddrNote}}</span></div>{{end}}
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;">
          <button type="button" class="btn" style="font-size:13px;" onclick="navigator.clipboard.writeText('{{if .Data.Event.City}}{{.Data.Event.City}} {{end}}{{.Data.Event.Location}}').then(()=>{this.textContent='已复制';setTimeout(()=>this.textContent='复制地址',1600)})">复制地址</button>
          <a class="btn" style="font-size:13px;" target="_blank" rel="noopener" href="https://uri.amap.com/search?keyword={{urlquery (printf "%s %s" .Data.Event.City .Data.Event.Location)}}">打开地图</a>
        </div>
      </div>
      {{end}}

      {{if .Data.Embed}}
      <div class="mod-panel" style="margin-top:16px;border:1px dashed #94a3b8;">
        <h3 class="mod-panel-title">{{ico "clipboard"}} 补充信息收集 · {{.Data.Embed.Title}}</h3>
        <p style="margin:0 0 10px;font-size:13.5px;color:var(--ink-soft);">名额与签到由上面的报名管，忌口、尺码这类细节在下面这张表里补——两不耽误。</p>
        <iframe src="/forms/{{.Data.Embed.ID}}" title="{{.Data.Embed.Title}}" loading="lazy" style="width:100%;min-height:760px;border:1px solid var(--line,#ddd);border-radius:10px;background:#fff;"></iframe>
        <div style="margin-top:8px;font-size:13px;"><a href="/forms/{{.Data.Embed.ID}}" target="_blank" rel="noopener">在新窗口打开这张表 →</a></div>
      </div>
      {{end}}

      {{if .Data.SeatPanel}}
      <div class="mod-panel" style="margin-top:16px;border:1px dashed #94a3b8;">
        <h3 class="mod-panel-title">{{ico "grid"}} 选座购票 · 对号入座</h3>
        <p style="margin:0 0 10px;font-size:13.5px;color:var(--ink-soft);">点座即锁、15 分钟内出票；座位号写进你的凭证，到场扫码连号对座。</p>
        {{.Data.SeatPanel}}
      </div>
      {{end}}

      <div class="event-pro">
        <a href="/pro">了解 Pro 授权</a>
      </div>
    </div>

    <!-- 侧栏：活动信息 + 报名 / 候补 -->
    <aside class="mod-sticky">
      <div class="mod-panel">
        <h3 class="mod-panel-title">活动信息</h3>
        <div class="event-facts">
          <div class="event-fact">
            <span class="event-fact-k">形态</span>
            <span class="event-fact-v">{{if eq .Data.Event.Mode "offline"}}线下相见{{else if eq .Data.Event.Mode "hybrid"}}线下 + 直播{{else}}线上开讲{{end}}</span>
          </div>
          <div class="event-fact">
            <span class="event-fact-k">状态</span>
            <span class="event-fact-v">{{.Data.Event.StateText}}</span>
          </div>
          <div class="event-fact">
            <span class="event-fact-k">开始</span>
            <span class="event-fact-v">{{dateTime .Data.Event.StartAt}}</span>
          </div>
          {{if .Data.Event.EndAt}}
          <div class="event-fact">
            <span class="event-fact-k">结束</span>
            <span class="event-fact-v">{{dateTime .Data.Event.EndAt}}</span>
          </div>
          {{end}}
          {{if .Data.Deadline}}
          <div class="event-fact">
            <span class="event-fact-k">报名截止</span>
            <span class="event-fact-v">{{dateTime .Data.Deadline}}</span>
          </div>
          {{end}}
          {{if ne .Data.Event.Mode "online"}}
          <div class="event-fact">
            <span class="event-fact-k">地点</span>
            <span class="event-fact-v">{{.Data.Event.Location}}</span>
          </div>
          {{end}}
          {{if ne .Data.Event.Mode "offline"}}
          <div class="event-fact">
            <span class="event-fact-k">观看</span>
            <span class="event-fact-v">报名后凭证页凭码打开</span>
          </div>
          {{end}}
          <div class="event-fact">
            <span class="event-fact-k">名额</span>
            <span class="event-fact-v">{{if .Data.Event.Capacity}}{{.Data.Event.Capacity}} 人{{else}}不限{{end}}</span>
          </div>
          <div class="event-fact">
            <span class="event-fact-k">报名</span>
            <span class="event-fact-v">{{.Data.SignupCount}} 人</span>
          </div>
        </div>

        {{if .Data.Err}}<div class="event-note event-note-warn">{{.Data.Err}}</div>{{end}}
        {{if .Data.Ok}}<div class="event-note" style="border-color:#22c55e;color:#15803d;">{{.Data.Ok}}</div>{{end}}

        {{if .Data.SeatPanel}}
        <div class="event-signup">
          <h4 class="event-signup-title">{{ico "grid"}} 本场按座购买</h4>
          <div class="event-note" style="margin-bottom:8px;">请在下方座位图选座出票——选几座就是几个座位，出票后凭证里直接带着座位号。</div>
          <div class="event-signup-hint">同场别人与你同抢一座，只有一个人能锁住；锁上 15 分钟内付款即归你。</div>
        </div>
        {{else}}
        {{if not .Data.CanSignup}}
        <div class="event-note event-note-warn">报名已截止，感谢关注下一场。</div>
        {{else}}
        <form class="event-signup" method="post" action="/events/{{.Data.Event.ID}}/signup">
          <h4 class="event-signup-title">{{ico "ticket"}} {{if .Data.Waitlist}}加入候补队列{{else}}报名参加{{end}}</h4>
          {{if .Data.Waitlist}}
          <div class="event-note event-note-warn" style="margin-bottom:10px;">名额已满，现在报名进入<strong>候补队列</strong>——有人退出会按排队顺序自动递补，递补后凭证照常生效。</div>
          {{end}}
          <div class="event-signup-row">
            <label>你的称呼</label>
            <input class="event-field" type="text" name="name" maxlength="64" required placeholder="怎么称呼你">
          </div>
          <div class="event-signup-row">
            <label>联系方式</label>
            <input class="event-field" type="text" name="contact" maxlength="128" placeholder="选填，便于发起人联系你">
          </div>
          <div class="event-signup-row">
            <label>留言</label>
            <textarea class="event-field" name="note" maxlength="500" placeholder="选填，想对发起人说点什么"></textarea>
          </div>
          {{captchaField}}
          <button class="btn btn-primary" type="submit">{{if .Data.Waitlist}}加入候补{{else}}报名并领取凭证{{end}}</button>
          <div class="event-signup-hint">
            {{if eq .Data.Event.Mode "offline"}}
            报名后生成专属二维码，到场出示给发起人扫码核验。
            {{else if eq .Data.Event.Mode "hybrid"}}
            报名后一张凭证两用：到场扫码签到，线上凭码进直播间。
            {{else}}
            报名后立即获得专属报名凭证，凭码进入、凭码补看回放。
            {{end}}
          </div>
        </form>
        <div style="margin-top:10px;font-size:12.5px;color:#94a3b8;text-align:center;">
          只是想填份问卷？<a href="/forms" style="color:inherit;">去表单看看 →</a>
        </div>
        {{end}}
        {{end}}
      </div>
    </aside>

    <!-- 活动讨论区：登录可发言，支持回复与删除本人/发起人评论 -->
    <section id="discuss" class="event-discuss" style="margin-top:24px;">
      <div class="mod-panel" style="padding:18px 20px;">
        <h3 class="mod-panel-title">{{ico "message"}} 讨论区
          {{if .Data.CommentCount}}<span style="font-size:13px;color:#94a3b8;margin-left:8px;">{{.Data.CommentCount}} 条</span>{{end}}
        </h3>
        {{if .Data.Ok}}<div style="padding:8px 12px;background:rgba(34,197,94,.12);color:#22c55e;border-radius:8px;margin-bottom:12px;font-size:13px;">{{.Data.Ok}}</div>{{end}}
        {{if .Data.Err}}<div style="padding:8px 12px;background:rgba(239,68,68,.12);color:#ef4444;border-radius:8px;margin-bottom:12px;font-size:13px;">{{.Data.Err}}</div>{{end}}
        <div id="event-comments">
          {{if .Data.Comments}}
          <div style="display:flex;flex-direction:column;gap:14px;">
            {{range .Data.Comments}}
            {{if eq .ParentID 0}}
            <div class="event-comment" id="ec-{{.ID}}" style="border-bottom:1px solid var(--line);padding-bottom:12px;">
              <div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px;">
                <div style="display:flex;align-items:baseline;gap:8px;min-width:0;">
                  <strong style="font-size:13.5px;">{{.Name}}</strong>
                  <span style="font-size:12px;color:#94a3b8;">{{dateTime .CreatedAt}}</span>
                </div>
                <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
                  {{if $.CSRF}}<a href="javascript:void 0" class="event-comment-reply" data-pid="{{.ID}}" data-name="{{.Name}}" style="font-size:12px;color:var(--accent);">回复</a>{{end}}
                  {{if index $.Data.CanDelete .ID}}
                  <form method="post" action="/events/{{$.Data.Event.ID}}/comment/delete" style="margin:0;">
                    <input type="hidden" name="csrf" value="{{$.CSRF}}">
                    <input type="hidden" name="cid" value="{{.ID}}">
                    <button type="submit" style="font-size:12px;color:#ef4444;background:none;border:none;cursor:pointer;padding:0;">删除</button>
                  </form>
                  {{end}}
                </div>
              </div>
              <p style="margin:6px 0 0;font-size:14px;color:var(--ink-soft);word-break:break-word;">{{.Content}}</p>
              {{$topID := .ID}}
              {{$topName := .Name}}
              {{range $.Data.Comments}}
              {{if eq .ParentID $topID}}
              <div style="margin-top:10px;padding-left:14px;border-left:2px solid var(--line);">
                <div style="display:flex;justify-content:space-between;align-items:baseline;gap:8px;">
                  <div style="display:flex;align-items:baseline;gap:8px;min-width:0;">
                    <strong style="font-size:12.5px;">{{.Name}}</strong>
                    <span style="font-size:11.5px;color:#94a3b8;">{{dateTime .CreatedAt}}</span>
                  </div>
                  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
                    {{if index $.Data.CanDelete .ID}}
                    <form method="post" action="/events/{{$.Data.Event.ID}}/comment/delete" style="margin:0;">
                      <input type="hidden" name="csrf" value="{{$.CSRF}}">
                      <input type="hidden" name="cid" value="{{.ID}}">
                      <button type="submit" style="font-size:12px;color:#ef4444;background:none;border:none;cursor:pointer;padding:0;">删除</button>
                    </form>
                    {{end}}
                  </div>
                </div>
                <p style="margin:4px 0 0;font-size:13px;color:var(--ink-soft);word-break:break-word;">回复 {{$topName}}：{{.Content}}</p>
              </div>
              {{end}}
              {{end}}
            </div>
            {{end}}
            {{end}}
          </div>
          {{else}}
          <p style="font-size:13px;color:#94a3b8;margin:4px 0;">还没有讨论，来抢沙发聊聊这场活动吧。</p>
          {{end}}
        </div>
        {{if $.CSRF}}
        <form method="post" action="/events/{{.Data.Event.ID}}/comment" style="margin-top:16px;">
          <input type="hidden" name="csrf" value="{{$.CSRF}}">
          <input type="hidden" name="reply_to" id="event-reply-to" value="0">
          <div style="margin-bottom:8px;font-size:12.5px;color:#94a3b8;" id="event-reply-tip"></div>
          <textarea name="content" rows="3" maxlength="500" required placeholder="参与讨论…（登录用户）" style="width:100%;box-sizing:border-box;resize:vertical;"></textarea>
          <div style="margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:8px;">
            <span style="font-size:12px;color:#94a3b8;">友善发言，活动讨论会通知发起人。</span>
            <button class="btn btn-primary" type="submit" style="font-size:13px;">发表讨论</button>
          </div>
        </form>
        <script>
        (function(){
          var tip=document.getElementById('event-reply-tip'),to=document.getElementById('event-reply-to');
          document.querySelectorAll('.event-comment-reply').forEach(function(a){
            a.addEventListener('click',function(){
              to.value=a.getAttribute('data-pid');
              tip.textContent='正在回复 '+a.getAttribute('data-name')+'：';
            });
          });
        })();
        </script>
        {{else}}
        <p style="margin-top:16px;font-size:13px;color:#94a3b8;">登录后即可参与活动讨论。</p>
        {{end}}
      </div>
    </section>

  </div>
</div>
{{end}}