{{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-pin p1"></span>
      <span class="event-pin p2"></span>
      <span class="event-pin p3"></span>
    </div>
    <div class="event-hero-sign" aria-hidden="true">
      <span class="sig-cn">晴空活动</span>
      <span class="sig-en">EVENTS</span>
    </div>
    <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-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>

  <!-- ===== 活动卡片流：一张卡片就是一张钉在板上的日程 ===== -->
  <div class="event-list">
    {{range .Data.Events}}
    <article class="event-card" data-mode="{{.Mode}}">
      <a class="event-cover" href="/events/{{.ID}}" aria-label="{{.Title}}">
        {{if .Cover}}<img src="{{.Cover}}" alt="{{.Title}}" loading="lazy">{{else}}<span class="event-cover-ph">{{ico "calendar"}}</span>{{end}}
        <span class="event-mode event-mode-{{.Mode}}">{{if eq .Mode "offline"}}线下{{else}}线上{{end}}</span>
      </a>
      <div class="event-body">
        <span class="event-when">{{ico "clock"}} {{dateTime .StartAt}}</span>
        <h2 class="event-title"><a href="/events/{{.ID}}">{{.Title}}</a></h2>
        <p class="event-summary">{{truncate .Summary 96}}</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>
    </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}}