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

<main class="max-w-6xl mx-auto px-4 py-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <article class="lg:col-span-2">
      <div class="rounded-3xl border border-steel-200 bg-white shadow-soft overflow-hidden">
        <div class="grid grid-cols-1 md:grid-cols-5 gap-0">
          <div class="md:col-span-2 bg-steel-50 border-b md:border-b-0 md:border-r border-steel-200">
            <div class="aspect-[4/3]">
              <img class="w-full h-full object-cover" src="{{default .Content.Img "https://picsum.photos/seed/mm-detail/1200/900"}}" alt="{{.Content.Title}}" />
            </div>
          </div>
          <div class="md:col-span-3 p-6 md:p-8">
            <div class="text-xs uppercase tracking-widest text-amber2-700/80">{{.CurrentColumn.Name}}</div>
            <h1 class="mt-2 text-2xl md:text-3xl font-semibold">{{.Content.Title}}</h1>
            <p class="mt-3 text-sm text-steel-600">{{.Content.Description}}</p>

            <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
              {{$model := index .Content.Ext "model"}}
              {{if $model}}
                <div class="p-4 rounded-2xl bg-steel-50 border border-steel-200">
                  <div class="text-xs text-steel-500">型号</div>
                  <div class="mt-1 font-semibold">{{$model}}</div>
                </div>
              {{end}}
              {{$power := index .Content.Ext "power"}}
              {{if $power}}
                <div class="p-4 rounded-2xl bg-steel-50 border border-steel-200">
                  <div class="text-xs text-steel-500">功率</div>
                  <div class="mt-1 font-semibold">{{$power}}</div>
                </div>
              {{end}}
              {{$capacity := index .Content.Ext "capacity"}}
              {{if $capacity}}
                <div class="p-4 rounded-2xl bg-steel-50 border border-steel-200">
                  <div class="text-xs text-steel-500">产能</div>
                  <div class="mt-1 font-semibold">{{$capacity}}</div>
                </div>
              {{end}}
              {{$delivery := index .Content.Ext "delivery"}}
              {{if $delivery}}
                <div class="p-4 rounded-2xl bg-steel-50 border border-steel-200">
                  <div class="text-xs text-steel-500">交付</div>
                  <div class="mt-1 font-semibold">{{$delivery}}</div>
                </div>
              {{end}}
            </div>

            <div class="mt-6 flex flex-wrap gap-3">
              <a href="/contact" class="h-11 inline-flex items-center px-5 rounded-xl bg-amber2-500 text-steel-950 font-semibold hover:bg-amber2-400">咨询报价</a>
              <a href="/message" class="h-11 inline-flex items-center px-5 rounded-xl bg-white border border-steel-200 hover:bg-steel-50">在线留言</a>
              <a href="/downloads" class="h-11 inline-flex items-center px-5 rounded-xl bg-white border border-steel-200 hover:bg-steel-50">获取资料</a>
            </div>

            <div class="mt-6 text-xs text-steel-500">发布：{{ParseTime .Content.CreatedAt "2006-01-02"}} · 浏览：{{.Content.Views}}</div>
          </div>
        </div>

        <div class="p-6 md:p-8 border-t border-steel-200">
          <div class="text-sm font-semibold">产品详情</div>
          <div class="prose max-w-none mt-4">
            {{Str2Html .Content.Content}}
          </div>
        </div>
      </div>

      {{$rel := Related .Content.Id 6}}
      {{if $rel}}
      <section class="mt-6 rounded-3xl border border-steel-200 bg-white p-6 shadow-soft">
        <div class="text-sm font-semibold">相关产品</div>
        <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
          {{range $rel}}
            <a href="{{.URL}}" class="rounded-2xl border border-steel-200 bg-steel-50 p-4 hover:bg-amber2-50 hover:border-amber2-200">
              <div class="text-sm font-medium line-clamp-2">{{.Title}}</div>
              <div class="mt-2 text-xs text-steel-500">{{ParseTime .CreatedAt "2006-01-02"}}{{if .Views}} · {{.Views}} 浏览{{end}}</div>
            </a>
          {{end}}
        </div>
      </section>
      {{end}}
    </article>

    <div>
      {{include "sidebar.html"}}
    </div>
  </div>
</main>

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