{{define "calendar_events_index"}}
<div class="calendar-page">
  <!-- 手账封面 Hero -->
  <header class="cal-hero">
    <div class="cal-hero-bg" aria-hidden="true">
      <span class="cal-stamp" aria-hidden="true">{{ico "calendar"}} SCHEDULE</span>
      <span class="cal-tape tape-1" aria-hidden="true"></span>
      <span class="cal-tape tape-2" aria-hidden="true"></span>
      <span class="cal-paperedge" aria-hidden="true"></span>
    </div>
    <p class="cal-eyebrow">{{ico "bookmark"}} TRAVEL NOTE · 活动手账</p>
    <h1 class="cal-title">把每一场，<br>盖进你的行程本</h1>
    <ol class="cal-flow">
      <li><i>1</i><b>报名</b><em>线上填表即占座</em></li>
      <li><i>2</i><b>拿凭证</b><em>线下生成专属票码</em></li>
      <li><i>3</i><b>被核验</b><em>发起人现场扫码</em></li>
      <li><i>4</i><b>算签到</b><em>到场即计入出席</em></li>
    </ol>
  </header>

  <!-- 形态筛选 -->
  <div class="cal-filter">
    <a href="/events{{if eq .Data.St ""}}?{{else}}?st={{.Data.St}}&amp;{{end}}" class="cal-tab {{if eq .Data.Mode ""}}on{{end}}">全部<em>{{.Data.Total}}</em></a>
    <a href="/events?mode=online{{if .Data.St}}&amp;st={{.Data.St}}{{end}}" class="cal-tab {{if eq .Data.Mode "online"}}on{{end}}">线上<em>{{.Data.OnlineCount}}</em></a>
    <a href="/events?mode=offline{{if .Data.St}}&amp;st={{.Data.St}}{{end}}" class="cal-tab {{if eq .Data.Mode "offline"}}on{{end}}">线下<em>{{.Data.OfflineCount}}</em></a>
    <a href="/events?mode=hybrid{{if .Data.St}}&amp;st={{.Data.St}}{{end}}" class="cal-tab {{if eq .Data.Mode "hybrid"}}on{{end}}">同场直播<em>{{.Data.HybridCount}}</em></a>
  </div>

  <!-- 状态筛选 -->
  <div class="cal-filter cal-filter-2">
    <a href="/events{{if .Data.Mode}}?mode={{.Data.Mode}}{{end}}" class="cal-tab {{if eq .Data.St ""}}on{{end}}">全部状态</a>
    <a href="/events?st=0{{if .Data.Mode}}&amp;mode={{.Data.Mode}}{{end}}" class="cal-tab {{if eq .Data.St "0"}}on{{end}}">报名中</a>
    <a href="/events?st=1{{if .Data.Mode}}&amp;mode={{.Data.Mode}}{{end}}" class="cal-tab {{if eq .Data.St "1"}}on{{end}}">已截止 · 满额</a>
    <a href="/events?st=2{{if .Data.Mode}}&amp;mode={{.Data.Mode}}{{end}}" class="cal-tab {{if eq .Data.St "2"}}on{{end}}">进行中</a>
    <a href="/events?st=3{{if .Data.Mode}}&amp;mode={{.Data.Mode}}{{end}}" class="cal-tab {{if eq .Data.St "3"}}on{{end}}">已结束</a>
    <a href="/events?st=4{{if .Data.Mode}}&amp;mode={{.Data.Mode}}{{end}}" class="cal-tab {{if eq .Data.St "4"}}on{{end}}">回放 · 回顾</a>
  </div>

  <!-- 行程时间轴：每场盖一枚邮戳 -->
  <div class="cal-timeline">
    {{range .Data.Events}}
    <article class="cal-stop">
      <span class="cal-node" aria-hidden="true">{{ico "pin"}}</span>
      <div class="cal-slip">
        <div class="cal-slip-head">
          <span class="cal-when">{{ico "clock"}} {{dateTime .StartAt}}</span>
          <span class="cal-mode">{{if eq .Mode "offline"}}线下{{else if eq .Mode "hybrid"}}同场直播{{else}}线上{{end}}</span>
          <span class="cal-state cal-state-{{.State}}">{{.StateText}}</span>
        </div>
        <h2 class="cal-title-sm"><a href="/events/{{.ID}}">{{.Title}}</a></h2>
        <p class="cal-summary">{{truncate .Summary 120}}</p>
        <div class="cal-foot">
          <span class="cal-place">{{if ne .Mode "online"}}{{ico "pin"}} {{if .City}}{{.City}} · {{end}}{{truncate .Location 14}}{{else}}{{ico "globe"}} 线上开讲{{end}}</span>
          <span class="cal-count">{{.SignupCount}} 人报名{{if .Capacity}} / {{.Capacity}}{{end}}</span>
          <a class="cal-more" href="/events/{{.ID}}">盖上这枚章 →</a>
        </div>
      </div>
      <a class="cal-thumb" href="/events/{{.ID}}" aria-label="{{.Title}}">
        {{if .Cover}}<img src="{{.Cover}}" alt="{{.Title}}" loading="lazy">{{else}}<span class="cal-thumb-char" aria-hidden="true">{{initial .Title}}</span>{{end}}
      </a>
    </article>
    {{else}}
    <div class="mod-empty">
      <h3>这一页还没写下行程</h3>
      <p>换个形态看看，或者等第一场活动挂出来。</p>
    </div>
    {{end}}
  </div>

  {{template "pagination" .}}
  {{template "module_meta" .}}

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