{{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}}
      <span class="text-gray-400">/</span>
      <span class="text-gray-900">{{.Content.Title}}</span>
    </div>
  </div>
</nav>
{{end}}
{{end}}

{{if .Content}}
<article class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
    {{if .Content.Img}}
    <div>
      <div class="vm-hover-image rounded-lg">
        <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full rounded-lg">
      </div>
    </div>
    {{end}}
    <div>
      <h1 class="text-4xl font-bold text-gray-900 mb-4">{{.Content.Title}}</h1>
      {{if .Content.Price}}
      <div class="text-3xl font-bold text-primary mb-4">¥{{printf "%.2f" .Content.Price}}</div>
      {{end}}
      {{if .Content.Ext}}
      {{$spec := index .Content.Ext "spec"}}
      {{if $spec}}
      <div class="mb-4">
        <h3 class="text-lg font-semibold mb-2">规格参数</h3>
        <p class="text-gray-600">{{$spec}}</p>
      </div>
      {{end}}

      {{$model := index .Content.Ext "model"}}
      {{$version := index .Content.Ext "version"}}
      {{$delivery := index .Content.Ext "delivery"}}
      {{$warranty := index .Content.Ext "warranty"}}
      {{$support := index .Content.Ext "support"}}
      {{if or $model $version $delivery $warranty $support}}
      <div class="mb-6">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
          {{if $model}}
          <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500">型号</span>
            <span class="text-gray-900 font-medium">{{$model}}</span>
          </div>
          {{end}}
          {{if $version}}
          <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500">版本</span>
            <span class="text-gray-900 font-medium">{{$version}}</span>
          </div>
          {{end}}
          {{if $delivery}}
          <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500">交付周期</span>
            <span class="text-gray-900 font-medium">{{$delivery}}</span>
          </div>
          {{end}}
          {{if $warranty}}
          <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500">质保</span>
            <span class="text-gray-900 font-medium">{{$warranty}}</span>
          </div>
          {{end}}
          {{if $support}}
          <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500">技术支持</span>
            <span class="text-gray-900 font-medium">{{$support}}</span>
          </div>
          {{end}}
        </div>
      </div>
      {{end}}
      {{end}}
      <p class="text-gray-600 leading-relaxed mb-6">{{.Content.Description}}</p>
    </div>
  </div>

  <div class="prose prose-lg max-w-none">
    <h2 class="text-2xl font-bold mb-4">产品详情</h2>
    {{.Content.Content|Str2Html}}
  </div>

  {{$albums := .Content.Albums}}
  {{if $albums}}
  <div class="mt-10">
    <h2 class="text-2xl font-bold mb-6">产品相册</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
      {{range $albums}}
      <div class="vm-hover-image rounded-xl bg-white shadow-sm border border-gray-100 overflow-hidden">
        <img src="{{.}}" alt="{{$.Content.Title}} 相册图" class="w-full h-40 object-cover">
      </div>
      {{end}}
    </div>
  </div>
  {{end}}

  {{if .Content.Tags}}
  <div class="mt-8 pt-8 border-t">
    <h3 class="text-lg font-semibold mb-4">标签</h3>
    <div class="flex flex-wrap gap-2">
      {{range .Content.Tags}}
      <a href="{{.URL}}" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 transition-colors">{{.Name}}</a>
      {{end}}
    </div>
  </div>
  {{end}}

  <div class="mt-8 pt-8 border-t">
    <h3 class="text-2xl font-bold mb-6">相关产品</h3>
    {{$related := Related .Content.Id 4}}
    {{if $related}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {{range $related}}
      <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-32 object-cover">
        </div>
        {{end}}
        <div class="p-4">
          <h4 class="text-lg font-semibold mb-2">
            <a href="{{.URL}}" class="hover:text-primary transition-colors">{{.Title}}</a>
          </h4>
        </div>
      </div>
      {{end}}
    </div>
    {{end}}
  </div>
</article>
{{end}}

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