{{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}}线上活动{{end}}</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 eq .Data.Event.Mode "offline"}}
          <span>{{ico "pin"}} {{.Data.Event.Location}}</span>
          {{else}}
          <span>{{ico "globe"}} 线上开讲</span>
          {{end}}
          <span>{{ico "eye"}} {{.Data.Event.Views}} 次浏览</span>
          <span>{{ico "users"}} 发起 · {{.Data.Event.Author}}</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)}}
        </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}}
        <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>

      <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}}线上开讲{{end}}</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 eq .Data.Event.Mode "offline"}}
          <div class="event-fact">
            <span class="event-fact-k">地点</span>
            <span class="event-fact-v">{{.Data.Event.Location}}</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.Full}}
        <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"}} 报名参加</h4>
          <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>
          <button class="btn btn-primary" type="submit">报名并领取凭证</button>
          <div class="event-signup-hint">
            {{if eq .Data.Event.Mode "offline"}}
            报名后生成专属二维码，到场出示给发起人扫码核验。
            {{else}}
            报名后立即获得专属报名凭证，凭码参加。
            {{end}}
          </div>
        </form>
        {{end}}
      </div>
    </aside>
  </div>
</div>
{{end}}