{{define "events_ticket"}}
  <link rel="stylesheet" href="/static/css/events.css?v={{assetVer}}">
<div class="thm-events">
  <div class="mod-back">
    <a href="/events/{{.Data.Event.ID}}">← 返回活动详情</a>
    <span style="margin:0 10px;color:var(--muted)">/</span>
    <a href="/events">全部活动</a>
  </div>

  <!-- ===== 报名凭证：左写信息，右撕存根，中间一道虚线 ===== -->
  <div class="event-ticket">
    <div class="event-ticket-main">
      <span class="event-kicker">{{ico "ticket"}} 报名凭证 · 请妥善保存</span>
      <h1 class="event-ticket-title">{{.Data.Event.Title}}</h1>
      <div class="event-ticket-meta">
        <span>{{ico "clock"}} {{dateTime .Data.Event.StartAt}}{{if .Data.Event.EndAt}} – {{dateTime .Data.Event.EndAt}}{{end}}</span>
        {{if eq .Data.Event.Mode "offline"}}
        <span>{{ico "pin"}} {{.Data.Event.Location}}</span>
        {{else}}
        <span>{{ico "globe"}} 线上开讲</span>
        {{end}}
        <span class="event-mode event-mode-{{.Data.Event.Mode}}">{{if eq .Data.Event.Mode "offline"}}线下{{else}}线上{{end}}</span>
      </div>

      <div class="event-facts">
        <div class="event-fact"><span class="event-fact-k">报名人</span><span class="event-fact-v">{{.Data.Signup.Name}}</span></div>
        {{if .Data.Signup.Contact}}
        <div class="event-fact"><span class="event-fact-k">联系方式</span><span class="event-fact-v">{{.Data.Signup.Contact}}</span></div>
        {{end}}
        <div class="event-fact"><span class="event-fact-k">报名时间</span><span class="event-fact-v">{{dateTime .Data.Signup.CreatedAt}}</span></div>
        <div class="event-fact"><span class="event-fact-k">签到状态</span><span class="event-fact-v">{{if eq .Data.Signup.CheckedIn 1}}已签到{{else}}待核验{{end}}</span></div>
        {{if .Data.Signup.Note}}
        <div class="event-fact"><span class="event-fact-k">留言</span><span class="event-fact-v">{{.Data.Signup.Note}}</span></div>
        {{end}}
      </div>

      <div class="event-ticket-code">
        <div class="event-code">{{.Data.Signup.Code}}</div>
        <div class="event-signup-hint" style="margin-top:6px;">这串报名码就是你的凭证编号</div>
      </div>

      <div class="event-ticket-hint">
        {{if eq .Data.Event.Mode "offline"}}
        到场时把右侧二维码出示给发起人，扫一下即完成签到；也可以直接报出上面这串报名码。
        {{else}}
        线上活动凭此凭证参加，开讲前留意发起人的上线信息，到点直接进入即可。
        {{end}}
      </div>
    </div>

    <div class="event-ticket-stub">
      <div class="event-ticket-qr">
        {{if .Data.QR}}
        <img src="{{.Data.QR}}" alt="报名码 {{.Data.Signup.Code}} 的二维码" width="220" height="220">
        {{else}}
        <span class="event-ticket-qr-ph">二维码生成失败，请直接报出报名码</span>
        {{end}}
      </div>
      <div class="event-ticket-perf" aria-hidden="true"></div>
      <div class="event-ticket-fig">{{.Data.Signup.Code}}</div>
    </div>
  </div>

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