{{define "events_index"}}
  <link rel="stylesheet" href="/static/css/events.css?v={{assetVer}}">
<div class="thm-events">
  <!-- ===== 页头 hero：一张日程长街 —— 右侧线上信号塔与线下场馆剪影，
       同立在一条底部时间刻度尺之上，右上压一叠撕页日历；左侧留白给文案 ===== -->
  <header class="event-hero">
    <div class="event-hero-bg" aria-hidden="true">
      <svg class="event-scene" viewBox="0 0 1200 180" preserveAspectRatio="none">
        <g class="event-tower">
          <path d="M832,180 L832,116 L848,116 L848,180 Z"/>
          <path d="M812,180 L868,180 L840,118 Z"/>
        </g>
        <g class="event-signal">
          <path d="M788,94 Q840,58 892,94"/>
          <path d="M766,72 Q840,30 914,72"/>
          <path d="M744,50 Q840,4 936,50"/>
        </g>
        <g class="event-city">
          <path d="M980,180 L980,140 L1026,140 L1026,180 Z"/>
          <path d="M1034,180 L1034,124 L1080,124 L1080,180 Z"/>
          <path d="M1088,180 L1088,146 L1130,146 L1130,180 Z"/>
          <path d="M1138,180 L1138,132 L1186,132 L1186,180 Z"/>
        </g>
        <path class="event-rail" d="M0,178 L1200,178"/>
        <g class="event-rail-pin">
          <circle cx="432" cy="178" r="6"/>
          <circle cx="596" cy="178" r="6"/>
          <circle cx="712" cy="178" r="6"/>
        </g>
      </svg>
      <span class="event-ruler"></span>
    </div>
    <span class="event-cal" aria-hidden="true">
      <b class="event-cal-top">EVENTS</b>
      <i class="event-cal-day">{{ico "calendar"}}</i>
    </span>
    <span class="event-note" aria-hidden="true">{{ico "play"}} 线上可回看 · 线下可补签</span>
    <h1 class="event-hero-title">线上见一面，或者当面见</h1>
    <ol class="event-hero-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="event-filter">
    <div class="event-tabs">
      <a href="/events{{if eq .Data.St ""}}?{{else}}?st={{.Data.St}}&amp;{{end}}" class="event-tab {{if eq .Data.Mode ""}}on{{end}}">
        <span class="event-tab-dot" aria-hidden="true"></span>全部<em>{{.Data.Total}}</em>
      </a>
      <a href="/events?mode=online{{if .Data.St}}&amp;st={{.Data.St}}{{end}}" class="event-tab {{if eq .Data.Mode "online"}}on{{end}}">
        <span class="event-tab-dot" aria-hidden="true"></span>线上<em>{{.Data.OnlineCount}}</em>
      </a>
      <a href="/events?mode=offline{{if .Data.St}}&amp;st={{.Data.St}}{{end}}" class="event-tab {{if eq .Data.Mode "offline"}}on{{end}}">
        <span class="event-tab-dot" aria-hidden="true"></span>线下<em>{{.Data.OfflineCount}}</em>
      </a>
      <a href="/events?mode=hybrid{{if .Data.St}}&amp;st={{.Data.St}}{{end}}" class="event-tab {{if eq .Data.Mode "hybrid"}}on{{end}}">
        <span class="event-tab-dot" aria-hidden="true"></span>同场直播<em>{{.Data.HybridCount}}</em>
      </a>
    </div>
    <span class="event-filter-hint">按形态筛选</span>
  </div>
  <div class="event-filter" style="margin-top:-4px;">
    <div class="event-tabs">
      <a href="/events{{if .Data.Mode}}?mode={{.Data.Mode}}{{end}}" class="event-tab {{if eq .Data.St ""}}on{{end}}"><span class="event-tab-dot" aria-hidden="true"></span>全部状态</a>
      <a href="/events?st=0{{if .Data.Mode}}&amp;mode={{.Data.Mode}}{{end}}" class="event-tab {{if eq .Data.St "0"}}on{{end}}"><span class="event-tab-dot" aria-hidden="true"></span>报名中</a>
      <a href="/events?st=1{{if .Data.Mode}}&amp;mode={{.Data.Mode}}{{end}}" class="event-tab {{if eq .Data.St "1"}}on{{end}}"><span class="event-tab-dot" aria-hidden="true"></span>已截止 · 满额</a>
      <a href="/events?st=2{{if .Data.Mode}}&amp;mode={{.Data.Mode}}{{end}}" class="event-tab {{if eq .Data.St "2"}}on{{end}}"><span class="event-tab-dot" aria-hidden="true"></span>进行中</a>
      <a href="/events?st=3{{if .Data.Mode}}&amp;mode={{.Data.Mode}}{{end}}" class="event-tab {{if eq .Data.St "3"}}on{{end}}"><span class="event-tab-dot" aria-hidden="true"></span>已结束</a>
      <a href="/events?st=4{{if .Data.Mode}}&amp;mode={{.Data.Mode}}{{end}}" class="event-tab {{if eq .Data.St "4"}}on{{end}}"><span class="event-tab-dot" aria-hidden="true"></span>回放 · 回顾</a>
    </div>
    <span class="event-filter-hint">按状态筛选</span>
  </div>

  <!-- ===== 日程时间轴：一根竖轨串起每一场 ===== -->
  <div class="event-timeline">
    {{range .Data.Events}}
    <article class="event-stop" data-mode="{{.Mode}}">
      <span class="event-node" aria-hidden="true"></span>
      <div class="event-slip">
        <div class="event-slip-head">
          <span class="event-when">{{ico "clock"}} {{dateTime .StartAt}}</span>
          <span class="event-mode event-mode-{{.Mode}}">{{if eq .Mode "offline"}}线下{{else if eq .Mode "hybrid"}}同场直播{{else}}线上{{end}}</span>
          <span class="event-state event-state-{{.State}}">{{.StateText}}</span>
        </div>
        <h2 class="event-title"><a href="/events/{{.ID}}">{{.Title}}</a></h2>
        <p class="event-summary">{{truncate .Summary 120}}</p>
        <div class="event-foot">
          <span class="event-place">{{if ne .Mode "online"}}{{ico "pin"}} {{if .City}}{{.City}} · {{end}}{{truncate .Location 14}}{{else}}{{ico "globe"}} 线上开讲{{end}}</span>
          <span class="event-count">{{.SignupCount}} 人报名{{if .Capacity}} / {{.Capacity}}{{end}}</span>
          <a class="event-more" href="/events/{{.ID}}">去报名 →</a>
        </div>
      </div>
      <a class="event-thumb" href="/events/{{.ID}}" aria-label="{{.Title}}">
        {{if .Cover}}<img src="{{.Cover}}" alt="{{.Title}}" loading="lazy">{{else}}<span class="event-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" .}}

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