{{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 style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid {{if eq .Data.Event.State 0}}#a5f3fc;color:#0e7490{{else if eq .Data.Event.State 1}}#fde68a;color:#b45309{{else if eq .Data.Event.State 2}}#bfdbfe;color:#1d4ed8{{else if eq .Data.Event.State 3}}#e5e7eb;color:#4b5563{{else}}#ddd6fe;color:#6d28d9{{end}};background:#fff;">{{.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>
  </div>
</div>
{{end}}