{{include "header.html"}}
{{include "nav.html"}}

{{if .Nav}}
<section class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
  <div class="text-sm text-[var(--muted)]">
    <a href="/" class="hover:text-[var(--primary)]">首页</a>
    {{range .Nav}}
    <span class="mx-2">/</span>
    <a href="{{.URL}}" class="hover:text-[var(--primary)]">{{.Name}}</a>
    {{end}}
  </div>
</section>
{{end}}

<main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
  <section class="rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
    <div class="max-w-3xl">
      <h1 class="text-3xl font-semibold text-[var(--text)] md:text-4xl">
        {{if .Single}}{{.Single.Column.Name}}{{else}}{{.Title}}{{end}}
      </h1>
      {{if .Single}}{{if .Single.Column.Description}}<p class="mt-4 text-base leading-8 text-[var(--muted)]">{{.Single.Column.Description}}</p>{{end}}{{end}}
      {{if and .CurrentColumn .CurrentColumn.Description}}{{if not .Single}}<p class="mt-4 text-base leading-8 text-[var(--muted)]">{{.CurrentColumn.Description}}</p>{{end}}{{end}}
{{if .CurrentColumn}}{{if eq .CurrentColumn.Slug "solutions"}}<p class="mt-4 text-sm leading-7 text-[var(--muted)]">这里展示可直接面向业务场景落地的 AI 解决方案，重点看场景、能力、部署方式和结果。</p>{{end}}{{end}}
      {{if .CurrentColumn}}{{if eq .CurrentColumn.Slug "services"}}<p class="mt-4 text-sm leading-7 text-[var(--muted)]">这里展示项目落地所需的交付能力，重点看规划、验证、架构、数据和集成。</p>{{end}}{{end}}
    </div>
  </section>

  {{if and .List (not .Single)}}
  <section class="mt-5">
    <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
      {{range .List}}
      <a href="{{.URL}}" class="vm-hover-card overflow-hidden rounded-[1.5rem] border border-[var(--border)] bg-white">
        {{if .Img}}<div class="aspect-[16/10] overflow-hidden bg-[var(--surface-blue)]"><img src="{{.Img}}" alt="{{.Title}}" class="h-full w-full object-cover"></div>{{end}}
        <div class="p-5">
          <div class="mb-3 flex flex-wrap gap-2">
            {{if .Ext}}{{if index .Ext "badge"}}<span class="rounded-full bg-[var(--primary-soft)] px-3 py-1 text-xs font-semibold text-[var(--primary)]">{{index .Ext "badge"}}</span>{{end}}{{end}}
            {{if .ColumnName}}<span class="rounded-full bg-[var(--surface-blue)] px-3 py-1 text-xs font-semibold text-[var(--muted)]">{{.ColumnName}}</span>{{end}}
          </div>
          <h2 class="text-xl font-semibold text-[var(--text)]">{{.Title}}</h2>
          <p class="mt-2 text-sm leading-7 text-[var(--muted)]">{{.Description}}</p>
          {{if .Ext}}
          <div class="mt-4 grid gap-2 text-sm text-[var(--muted)]">
            {{if index .Ext "scenario"}}<div>场景：{{index .Ext "scenario"}}</div>{{end}}
            {{if index .Ext "function"}}<div>能力：{{index .Ext "function"}}</div>{{end}}
            {{if index .Ext "result"}}<div>结果：{{index .Ext "result"}}</div>{{end}}
            {{if index .Ext "industry"}}<div>行业：{{index .Ext "industry"}}</div>{{end}}
          </div>
          {{end}}
        </div>
      </a>
      {{end}}
    </div>

    {{if .Pager.Enabled}}
    <div class="mt-10 flex justify-center">
      <nav class="flex flex-wrap gap-2">
        {{if .Pager.HasPrev}}<a href="{{.Pager.PrevURL}}" class="rounded-full border border-[var(--border)] bg-white px-4 py-2 text-sm">上一页</a>{{end}}
        {{range .Pager.Items}}
        {{if .Active}}
        <span class="rounded-full bg-[var(--primary)] px-4 py-2 text-sm text-white">{{.Label}}</span>
        {{else if .URL}}
        <a href="{{.URL}}" class="rounded-full border border-[var(--border)] bg-white px-4 py-2 text-sm">{{.Label}}</a>
        {{end}}
        {{end}}
        {{if .Pager.HasNext}}<a href="{{.Pager.NextURL}}" class="rounded-full border border-[var(--border)] bg-white px-4 py-2 text-sm">下一页</a>{{end}}
      </nav>
    </div>
    {{end}}
  </section>
  {{else}}
  <section class="mt-8 rounded-[2rem] border border-[var(--border)] bg-white p-8 text-center text-[var(--muted)]">暂无内容</section>
  {{end}}
</main>

{{include "footer.html"}}
{{include "js.html"}}