{{ define "body" }}
{{ $slug := .Params.project }}
{{ $matched := where hugo.Data.projects.projects "slug" $slug }}
{{ with index $matched 0 }}

<section class="page-hero" style="--accent: {{ .accent }}">
  <h1>{{ .name }}</h1>
  <p class="subtitle">{{ .description }}</p>
</section>

<section class="page-content container">
  <!-- Links -->
  <div class="sw-links">
    <a href="{{ .repo_url }}" class="btn btn-accent external" target="_blank" rel="noopener">Gitee 源码</a>
    {{ with .doc_url }}<a href="{{ . }}" class="btn btn-outline external" target="_blank" rel="noopener">文档</a>{{ end }}
    {{ if eq .slug "btcli" }}
    <a href="https://crates.io/crates/btcli" class="btn btn-outline external" target="_blank" rel="noopener">Crates.io</a>
    {{ end }}
  </div>

  <!-- Features -->
  <div class="sw-features">
    {{ range .features }}
    <div class="feature-card">
      <h3>{{ .title }}</h3>
      <p>{{ .desc }}</p>
    </div>
    {{ end }}
  </div>

  <!-- Install -->
  {{ with .install }}
  <div class="sw-section">
    <h2>安装</h2>
    <div class="sw-code">{{ . }}</div>
  </div>
  {{ end }}

  <!-- Usage -->
  {{ with .usage }}
  <div class="sw-section">
    <h2>使用</h2>
    <div class="usage-list">
      {{ range . }}
      <div class="usage-item">
        <code>{{ .cmd }}</code>
        <span>{{ .desc }}</span>
      </div>
      {{ end }}
    </div>
  </div>
  {{ end }}

  <!-- License -->
  {{ with .license }}
  <div class="sw-section">
    <h2>许可证</h2>
    <p>{{ . }}</p>
  </div>
  {{ end }}

  <!-- Drag ball for btcli -->
  {{ if .has_drag_ball }}
  <div class="drag-ball-area">
    <canvas id="drag-ball" width="200" height="200"></canvas>
    <p class="drag-hint">拖动小球试试 (¬‿¬)</p>
  </div>
  {{ end }}
</section>

{{ end }}
{{ end }}

{{ define "extra_scripts" }}
{{ $slug := .Params.project }}
{{ $matched := where hugo.Data.projects.projects "slug" $slug }}
{{ with index $matched 0 }}
{{ if .has_drag_ball }}
<script src="/js/drag-ball.js"></script>
{{ end }}
{{ end }}
{{ end }}