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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="bg-gray-100 py-4">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center space-x-2 text-sm">
      <a href="/" class="text-gray-600 hover:text-primary">首页</a>
      {{range .Nav}}
      <span class="text-gray-400">/</span>
      <a href="{{.URL}}" class="text-gray-600 hover:text-primary">{{.Name}}</a>
      {{end}}
    </div>
  </div>
</nav>
{{end}}
{{end}}

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  {{if .Single}}
  <h1 class="text-3xl font-bold mb-8">{{.Single.Name}}</h1>
  {{if .Single.Description}}
  <p class="text-gray-600 text-lg mb-8">{{.Single.Description}}</p>
  {{end}}
  {{else}}
  <h1 class="text-3xl font-bold mb-8">产品中心</h1>
  {{end}}

  {{if .List}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      {{range .List}}
    <div class="vm-hover-card bg-white rounded-lg shadow-md overflow-hidden">
      {{if .Img}}
      <div class="vm-hover-image">
        <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-48 object-cover">
      </div>
      {{end}}
      <div class="p-6">
        <div class="h-6 mb-2">
          {{if .Ext}}
          {{$badge := index .Ext "badge"}}
          {{if $badge}}
          <span class="inline-block px-2 py-1 bg-primary text-white text-xs rounded">{{$badge}}</span>
          {{end}}
          {{end}}
        </div>
        <h3 class="text-xl font-semibold mb-2">
          <a href="{{.URL}}" class="hover:text-primary transition-colors">{{.Title}}</a>
        </h3>
        <p class="text-gray-600 leading-relaxed mb-4">{{StrSub .Description 100}}</p>
        {{if .Price}}
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-primary">¥{{printf "%.2f" .Price}}</span>
          <a href="{{.URL}}" class="px-4 py-2 bg-primary text-white text-sm font-medium rounded hover:bg-blue-700 transition-colors">
            查看详情
          </a>
        </div>
        {{else}}
        <a href="{{.URL}}" class="inline-block px-4 py-2 bg-primary text-white text-sm font-medium rounded hover:bg-blue-700 transition-colors">
          查看详情
        </a>
      {{end}}
      </div>
    </div>
    {{end}}
  </div>

  {{if .Pager.Enabled}}
  <div class="mt-12 flex justify-center">
    <nav class="flex space-x-2">
      {{if .Pager.HasPrev}}
      <a href="{{.Pager.PrevURL}}" class="px-4 py-2 bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors">上一页</a>
      {{end}}
      {{range .Pager.Items}}
      {{if .Active}}
      <span class="px-4 py-2 bg-primary text-white rounded">{{.Label}}</span>
      {{else if .URL}}
      <a href="{{.URL}}" class="px-4 py-2 bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors">{{.Label}}</a>
      {{end}}
      {{end}}
      {{if .Pager.HasNext}}
      <a href="{{.Pager.NextURL}}" class="px-4 py-2 bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors">下一页</a>
      {{end}}
    </nav>
  </div>
  {{end}}
  {{else}}
  <div class="text-center py-12">
    <p class="text-gray-500 text-lg">暂无产品</p>
  </div>
  {{end}}
</div>

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