{{define "extra_news_index"}}
<div class="extra-page">
  <!-- 号外 Hero：滚动播报 + 号外印章 -->
  <header class="extra-hero">
    <div class="extra-ticker" aria-hidden="true">
      <span class="extra-ticker-label">EXTRA · 号外</span>
      <span class="extra-ticker-track">
        <b>不追流量 · 只追真实</b> ／ 快讯管快 · 深度管深 · 专栏管好看 · 生活管日子 ／ 每一条资讯都带着来源与温度 ／
        <b>不追流量 · 只追真实</b> ／ 快讯管快 · 深度管深 · 专栏管好看 · 生活管日子 ／ 每一条资讯都带着来源与温度 ／
      </span>
    </div>
    <div class="extra-masthead">
      <div>
        <p class="extra-eyebrow">{{ico "zap"}} BREAKING · 号外快讯</p>
        <h1 class="extra-title">号外<span class="extra-stamp">EXTRA</span></h1>
        <p class="extra-sub">值得被看见的，都会上头版。</p>
      </div>
      <div class="extra-desk">
        <span class="extra-desk-label">本版导读</span>
        {{if .Data.Categories}}
        <ul class="extra-desk-cols">
          {{range .Data.Categories}}<li><b>{{.Name}}</b><em>{{.Count}}</em></li>{{end}}
        </ul>
        {{else}}
        <span class="extra-desk-empty">头条席位空缺，等你来稿</span>
        {{end}}
        <span class="extra-desk-note">{{ico "news"}} 累计 <b>{{.Data.Total}}</b> 条 · 说得越真，排得越前</span>
      </div>
    </div>
  </header>

  <!-- 读者来稿 -->
  {{if .Data.Err}}<div class="press-post-err">{{.Data.Err}}</div>{{end}}
  <section class="extra-post">
    <h3 class="extra-post-title">{{ico "zap"}} 读者来稿 · 登录投稿</h3>
    {{if .Data.CurrentUser}}
    <form method="post" action="/news/publish">
      <div class="extra-post-row">
        <input type="text" name="title" placeholder="标题（必填）" maxlength="80" required>
        <select name="category" required>
          <option value="">选栏目…</option>
          {{range .Data.Categories}}<option value="{{.Name}}">{{.Name}}</option>{{end}}
        </select>
        <input type="text" name="source" placeholder="来源署名（选填）" maxlength="40">
      </div>
      <input type="text" name="summary" placeholder="一句话摘要（必填）" maxlength="200" required>
      <textarea name="content" data-zx-editor data-upload="/blog/upload" placeholder="正文（必填，支持 Markdown：标题、列表、表格、引用都行）" rows="5" maxlength="20000" required></textarea>
      <div class="extra-post-foot">
        <span class="extra-post-hint">{{ico "mail"}} 以 <b>{{.Data.CurrentUser}}</b> 的身份投稿，见报即公开。</span>
        <button class="btn btn-primary" type="submit">投稿见报</button>
      </div>
    </form>
    {{else}}
    <div class="extra-post-login">
      <span>登录后即可投稿号外快讯。</span>
      <a class="btn btn-primary btn-sm" href="/admin/login">去登录</a>
    </div>
    {{end}}
  </section>

  <!-- 栏目筛选 -->
  <nav class="extra-sections">
    <a href="/news" class="extra-section {{if eq .Data.Category ""}}on{{end}}">全部栏目<em>{{.Data.Total}}</em></a>
    {{range .Data.Categories}}
    <a href="/news?category={{.Name}}" class="extra-section {{if eq $.Data.Category .Name}}on{{end}}">{{.Name}}<em>{{.Count}}</em></a>
    {{end}}
  </nav>

  {{if .Data.News}}
  <div class="extra-flow">
    {{range $i, $n := .Data.News}}
      {{if eq $i 0}}
      <article class="extra-lead">
        <div class="extra-lead-kicker">
          <a class="extra-chip" href="/news?category={{$n.Category}}">{{$n.Category}}</a>
          {{if $n.Fresh}}<span class="extra-badge extra-badge-new">NEW</span>{{end}}
          {{if $n.Hot}}<span class="extra-badge extra-badge-hot">HOT</span>{{end}}
        </div>
        <h2 class="extra-lead-title"><a href="/news/{{$n.Slug}}">{{$n.Title}}</a></h2>
        <p class="extra-lead-summary">{{$n.Summary}}</p>
        <div class="extra-lead-foot">
          <span class="extra-lead-meta">
            <span>{{ico "clock"}} {{date $n.CreatedAt}}</span>
            <span>{{ico "rss"}} 来源 {{if $n.Source}}{{$n.Source}}{{else}}晴空编辑部{{end}}</span>
            <span>{{ico "eye"}} {{$n.Views}}</span>
          </span>
          <a class="extra-lead-more" href="/news/{{$n.Slug}}">读全文 →</a>
        </div>
      </article>
      {{else}}
      <article class="extra-clip">
        <div class="extra-clip-top">
          <a class="extra-chip" href="/news?category={{$n.Category}}">{{$n.Category}}</a>
          {{if $n.Fresh}}<span class="extra-badge extra-badge-new">NEW</span>{{end}}
          {{if $n.Hot}}<span class="extra-badge extra-badge-hot">HOT</span>{{end}}
        </div>
        <h3 class="extra-clip-title"><a href="/news/{{$n.Slug}}">{{$n.Title}}</a></h3>
        <p class="extra-clip-summary">{{$n.Summary}}</p>
        <div class="extra-clip-foot">
          <span class="extra-clip-meta">
            <span>{{ico "rss"}} {{if $n.Source}}{{$n.Source}}{{else}}晴空编辑部{{end}}</span>
            <span>{{ico "clock"}} {{date $n.CreatedAt}}</span>
            <span>{{ico "eye"}} {{$n.Views}}</span>
          </span>
          <a class="extra-clip-more" href="/news/{{$n.Slug}}">读全文 →</a>
        </div>
      </article>
      {{end}}
    {{end}}
  </div>
  {{else}}
  <div class="extra-empty">
    <h3>今日尚无来稿</h3>
    <p>号外还没出刊，先去别处逛逛吧。</p>
  </div>
  {{end}}

  {{template "pagination" .}}
  {{template "module_meta" .}}
</div>
{{end}}