{{/* Right Editorial Tools sidebar (US-030)
     Groups: Table of Contents / AI Companion / Annotations / Share Scroll
     Rendered inside aside.article-tools (≥1280px sticky right column)
     Uses .reading-companion DOM structure so reading-companion.js auto-initialises.
*/}}

{{- $page := . }}
{{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content }}
{{- $has_headers := ge (len $headers) 1 }}
{{/* ── Series detection for sidebar Tab ── */}}
{{- $rcSeries := $page.Params.series }}
{{- $rcHasSeries := and $rcSeries $rcSeries.slug }}
{{- $rcSeriesOrdered := slice }}
{{- if $rcHasSeries }}
  {{- $rcSibs := slice }}
  {{- range where (where site.RegularPages "Lang" $page.Lang) "Params.series.slug" $rcSeries.slug }}
    {{- $rcSibs = $rcSibs | append . }}
  {{- end }}
  {{- $rcSeriesOrdered = sort $rcSibs "Params.series.order" "asc" }}
{{- end }}

<aside class="reading-companion editorial-tools-panel" aria-label="{{ i18n "tools.toc" | default "Editorial Tools" | safeHTML }}">

  {{/* ── Tab Bar ── */}}
  <div class="rc-tabs" role="tablist">
    <button class="rc-tab rc-tab--active" role="tab"
            aria-selected="true" aria-controls="rc-panel-toc"
            id="rc-tab-toc" data-tab="toc">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
        <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
      </svg>
      <span>{{ i18n "tools.toc" | default "Contents" | safeHTML }}</span>
    </button>
    {{- if $rcHasSeries }}
    <button class="rc-tab" role="tab"
            aria-selected="false" aria-controls="rc-panel-series"
            id="rc-tab-series" data-tab="series">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
      </svg>
      <span>{{ if eq $page.Lang "zh" }}系列{{ else }}Series{{ end }}</span>
    </button>
    {{- end }}
    <button class="rc-tab" role="tab"
            aria-selected="false" aria-controls="rc-panel-ai"
            id="rc-tab-ai" data-tab="ai">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"/>
        <circle cx="7.5" cy="14.5" r="1.5" fill="currentColor" stroke="none"/>
        <circle cx="16.5" cy="14.5" r="1.5" fill="currentColor" stroke="none"/>
      </svg>
      <span>{{ i18n "tools.ai" | default "AI" | safeHTML }}</span>
    </button>
  </div>

  {{/* ── Panel 1: Table of Contents ── */}}
  <div class="rc-panel rc-panel--active" id="rc-panel-toc" role="tabpanel" aria-labelledby="rc-tab-toc">
    {{- if $has_headers }}
    <nav class="toc-side__nav" aria-label="{{ i18n "tools.toc" | default "Table of Contents" | safeHTML }}">
      <ul>
        {{- range $headers -}}
        {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
        {{- $headerLevel := len (seq $headerLevel) -}}
        {{- $id := index (findRE "(id=\"(.*?)\")" . 9) 0 }}
        {{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
        {{- $headerClean := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" . -}}
        <li class="toc-item toc-item--h{{- $headerLevel -}}">
          <a href="#{{- $cleanedID -}}" data-level="{{- $headerLevel -}}">{{- $headerClean | safeHTML -}}</a>
        </li>
        {{- end -}}
      </ul>
    </nav>
    {{- else }}
    <p class="et-empty">{{ i18n "tools.toc_empty" | default "No headings" | safeHTML }}</p>
    {{- end }}
  </div>

  {{- if $rcHasSeries }}
  {{/* ── Panel: Series (multi-part essay group) ── */}}
  <div class="rc-panel" id="rc-panel-series" role="tabpanel" aria-labelledby="rc-tab-series" hidden>
    {{- $sIsZh := eq $page.Lang "zh" }}
    {{- $sOrder := $rcSeries.order | default 0 }}
    {{- $sTotal := $rcSeries.total | default (len $rcSeriesOrdered) }}
    {{- $rcColumnURL := printf "/columns/%s/" $rcSeries.slug }}
    {{- if eq $page.Lang "zh" }}{{ $rcColumnURL = printf "/zh/columns/%s/" $rcSeries.slug }}{{ end }}
    <div class="rc-series-panel">
      <div class="rc-series-head">
        <span class="rc-series-eyebrow">{{ if $sIsZh }}系列{{ else }}Series{{ end }}</span>
        <a class="rc-series-name rc-series-name--link" href="{{ $rcColumnURL | relURL }}" title="{{ if $sIsZh }}进入专栏{{ else }}Open column{{ end }}">{{ $rcSeries.name }}</a>
        <span class="rc-series-badge">{{ if $sIsZh }}{{ $sOrder }} / {{ $sTotal }}{{ else }}{{ $sOrder }} of {{ $sTotal }}{{ end }}</span>
      </div>
      <ol class="rc-series-list">
        {{- range $rcSeriesOrdered }}
          {{- $isCurrent := eq .RelPermalink $page.RelPermalink }}
          {{- $ord := .Params.series.order | default 0 }}
          <li class="rc-series-item{{ if $isCurrent }} is-current{{ end }}">
            {{- if $isCurrent }}
            <span class="rc-series-link" aria-current="page">
              <span class="rc-series-num">{{ $ord }}</span>
              <span class="rc-series-body">
                <span class="rc-series-title">{{ .Title }}</span>
                {{- with .Description }}<span class="rc-series-desc">{{ . | truncate 70 "…" }}</span>{{- end }}
              </span>
            </span>
            {{- else }}
            <a class="rc-series-link" href="{{ .RelPermalink }}">
              <span class="rc-series-num">{{ $ord }}</span>
              <span class="rc-series-body">
                <span class="rc-series-title">{{ .Title }}</span>
                {{- with .Description }}<span class="rc-series-desc">{{ . | truncate 70 "…" }}</span>{{- end }}
              </span>
              <svg class="rc-series-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polyline points="9 18 15 12 9 6"/>
              </svg>
            </a>
            {{- end }}
          </li>
        {{- end }}
      </ol>
    </div>
  </div>
  {{- end }}

  {{/* ── Panel 2: AI Companion ── */}}
  <div class="rc-panel" id="rc-panel-ai" role="tabpanel" aria-labelledby="rc-tab-ai" hidden>
    <div class="rc-ai-panel">
      {{- $isZh := eq $page.Lang "zh" -}}
      <div class="rc-ai-quick-label">{{ if $isZh }}快速开始{{ else }}Quick start{{ end }}</div>
      <div class="rc-ai-quick" id="rc-quick-actions">
        <button type="button" class="rc-ai-chip" data-prompt="{{ if $isZh }}用 3-5 句话精炼地概括这篇文章的核心观点。{{ else }}Summarize the key points of this article in 3–5 sentences.{{ end }}">
          <span class="rc-ai-chip__icon">📝</span>{{ if $isZh }}一句话总结{{ else }}Summary{{ end }}
        </button>
        <button type="button" class="rc-ai-chip" data-prompt="{{ if $isZh }}从这篇文章中挑出 3 句最有穿透力的话，并简要说明它们为什么值得记住。{{ else }}List the 3 most memorable sentences from this article, and briefly explain why they stand out.{{ end }}">
          <span class="rc-ai-chip__icon">✨</span>{{ if $isZh }}精彩金句{{ else }}Highlights{{ end }}
        </button>
        <button type="button" class="rc-ai-chip" data-prompt="{{ if $isZh }}这篇文章里有哪些容易被忽略但重要的概念？请列出并解释。{{ else }}What are the overlooked but important concepts in this article? List and explain.{{ end }}">
          <span class="rc-ai-chip__icon">💡</span>{{ if $isZh }}关键概念{{ else }}Key concepts{{ end }}
        </button>
        <button type="button" class="rc-ai-chip" data-prompt="{{ if $isZh }}帮我挑出这篇文章里最值得质疑或反驳的观点，并给出反方视角。{{ else }}Which claims in this article are most worth challenging? Give me a counter-argument.{{ end }}">
          <span class="rc-ai-chip__icon">🤔</span>{{ if $isZh }}反方视角{{ else }}Counter-argument{{ end }}
        </button>
        <button type="button" class="rc-ai-chip" data-prompt="{{ if $isZh }}如果我是第一次接触这个主题的读者，请用最简单的比喻帮我理解这篇文章。{{ else }}Explain this article to a complete beginner using the simplest analogy possible.{{ end }}">
          <span class="rc-ai-chip__icon">🎓</span>{{ if $isZh }}小白讲解{{ else }}ELI5{{ end }}
        </button>
        <button type="button" class="rc-ai-chip" data-prompt="{{ if $isZh }}基于这篇文章的主题和内容，推荐 3 个延伸阅读方向或相关话题。{{ else }}Based on this article, suggest 3 directions for further reading or related topics.{{ end }}">
          <span class="rc-ai-chip__icon">🔗</span>{{ if $isZh }}延伸阅读{{ else }}Further reading{{ end }}
        </button>
        {{- if $rcHasSeries }}
        {{- $rcSeriesTitles := slice }}
        {{- range $rcSeriesOrdered }}{{ $rcSeriesTitles = $rcSeriesTitles | append .Title }}{{ end }}
        {{- $rcSeriesAllTitles := delimit $rcSeriesTitles " / " }}
        <button type="button" class="rc-ai-chip rc-ai-chip--series" data-prompt="{{ if $isZh }}这篇文章属于《{{ $rcSeries.name }}》系列（全 {{ len $rcSeriesOrdered }} 篇：{{ $rcSeriesAllTitles }}）。请用一段话把整个系列的脉络讲清楚，再告诉我这一篇在其中扮演什么角色。{{ else }}This article is part of the {{ $rcSeries.name }} series ({{ len $rcSeriesOrdered }} parts in total: {{ $rcSeriesAllTitles }}). Give me a one-paragraph map of the whole series, then tell me what role this part plays.{{ end }}">
          <span class="rc-ai-chip__icon">🧭</span>{{ if $isZh }}全系列脉络{{ else }}Series map{{ end }}
        </button>
        <button type="button" class="rc-ai-chip rc-ai-chip--series" data-prompt="{{ if $isZh }}这篇文章在《{{ $rcSeries.name }}》系列里是第 {{ $rcSeries.order }} 篇。请对照另外几篇（{{ $rcSeriesAllTitles }}），告诉我这一篇相对其他几篇的独特视角和不可替代的部分是什么。{{ else }}This article is Part {{ $rcSeries.order }} of the {{ $rcSeries.name }} series. Comparing it to the others ({{ $rcSeriesAllTitles }}), what is the unique angle this part contributes that the others do not?{{ end }}">
          <span class="rc-ai-chip__icon">🔀</span>{{ if $isZh }}与他篇对比{{ else }}Compare to siblings{{ end }}
        </button>
        {{- end }}
      </div>
      <div class="rc-ai-messages" aria-live="polite"></div>
      <div class="rc-ai-loading" hidden>
        <span class="rc-ai-dot"></span>
        <span class="rc-ai-dot"></span>
        <span class="rc-ai-dot"></span>
        <span class="rc-ai-loading-text">{{ if eq $page.Lang "zh" }}AI 思考中…{{ else }}AI is thinking…{{ end }}</span>
      </div>
      <div class="rc-ai-input-area">
        <textarea class="rc-ai-textarea" rows="2" maxlength="500"
          placeholder="{{ if eq $page.Lang "zh" }}{{ i18n "tools.ai_placeholder" | default "向 AI 提问…" | safeHTML }}{{ else }}{{ i18n "tools.ai_placeholder" | default "Ask about this article..." | safeHTML }}{{ end }}"
          aria-label="{{ i18n "tools.ai" | default "AI Companion" | safeHTML }}"></textarea>
        <button class="rc-ai-send" aria-label="{{ i18n "ai_send_label" | default "Send" | safeHTML }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <line x1="22" y1="2" x2="11" y2="13"/>
            <polygon points="22 2 15 22 11 13 2 9 22 2"/>
          </svg>
        </button>
        <span class="rc-ai-charcount" aria-hidden="true" hidden></span>
      </div>
    </div>
  </div>


</aside>