{{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">
      <span class="event-grid"></span>
      <span class="event-cell"></span>
      <span class="event-ruler"></span>
      <span class="event-pin p1"></span>
      <span class="event-pin p2"></span>
      <span class="event-pin p3"></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-kicker">{{ico "calendar"}} 晴空活动 · 线上开讲，线下碰面</span>
    <h1 class="event-hero-title">线上见一面，<br>或者当面见</h1>
    <p class="event-hero-sub">
      线上的报名即可参加，到点开讲、随时回看；线下的报名后会拿到一张<strong>专属报名凭证</strong>，
      由发起人现场扫码核验，到场即算签到。<b>报得上，就来得及</b>——不占座，也不空等。
    </p>
    <div class="event-hero-feet">
      <span>{{ico "globe"}} 线上 · {{.Data.OnlineCount}} 场</span>
      <span>{{ico "pin"}} 线下 · {{.Data.OfflineCount}} 场</span>
      <span>{{ico "check"}} 共 {{.Data.Total}} 场活动</span>
    </div>
  </header>

  <!-- ===== 形态筛选：方点日程片（全部 / 线上 / 线下） ===== -->
  <div class="event-filter">
    <div class="event-tabs">
      <a href="/events" 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" 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" class="event-tab {{if eq .Data.Mode "offline"}}on{{end}}">
        <span class="event-tab-dot" aria-hidden="true"></span>线下<em>{{.Data.OfflineCount}}</em>
      </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}}线上{{end}}</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 eq .Mode "offline"}}{{ico "pin"}} {{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>
      {{if .Cover}}<a class="event-thumb" href="/events/{{.ID}}" aria-label="{{.Title}}"><img src="{{.Cover}}" alt="{{.Title}}" loading="lazy"></a>{{end}}
    </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}}