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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-slate-200 bg-white">
  <div class="mx-auto max-w-7xl px-4 py-4 text-sm text-slate-500 sm:px-6 lg:px-8">
    <a href="/" class="hover:text-primary">首页</a>
    {{range .Nav}} <span class="px-2">/</span> <a href="{{.URL}}" class="hover:text-primary">{{.Name}}</a>{{end}}
    <span class="px-2">/</span>
    <span class="text-slate-900">{{.Content.Title}}</span>
  </div>
</nav>
{{end}}
{{end}}

{{if .Content}}
{{$albums := .Content.Albums}}
<main class="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="grid gap-8 lg:grid-cols-[1.15fr_0.85fr] lg:items-start">
    <div class="space-y-4">
      <div class="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200">
        <img src="{{DefaultCover .Content.Img}}" alt="{{.Content.Title}}" class="h-[420px] w-full object-cover">
      </div>
      {{if .Content.Albums}}
      <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-lg font-semibold">房源相册</h2>
          <span class="text-sm text-slate-500">点击图片查看原图</span>
        </div>
        <div class="grid grid-cols-3 gap-3 sm:grid-cols-4 lg:grid-cols-5">
          {{if eq (printf "%T" $albums) "string"}}
          {{range $i, $img := Split $albums ","}}
          {{if $img}}
          <button type="button" class="js-album-open group overflow-hidden rounded-lg ring-1 ring-slate-200" data-album="{{$img}}" data-album-alt="{{$.Content.Title}} 相册图 {{Add $i 1}}">
            <img src="{{$img}}" alt="{{$.Content.Title}} 相册图 {{Add $i 1}}" class="h-24 w-full object-cover transition duration-300 group-hover:scale-105">
          </button>
          {{end}}
          {{end}}
          {{else}}
          {{range $i, $img := $albums}}
          {{if $img}}
          <button type="button" class="js-album-open group overflow-hidden rounded-lg ring-1 ring-slate-200" data-album="{{$img}}" data-album-alt="{{$.Content.Title}} 相册图 {{Add $i 1}}">
            <img src="{{$img}}" alt="{{$.Content.Title}} 相册图 {{Add $i 1}}" class="h-24 w-full object-cover transition duration-300 group-hover:scale-105">
          </button>
          {{end}}
          {{end}}
          {{end}}
        </div>
      </div>
      {{end}}
    </div>
    <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
      <div class="text-sm text-slate-500">{{.Content.ColumnName}}</div>
      <h1 class="mt-3 text-3xl font-semibold">{{.Content.Title}}</h1>
      {{if and .Content.Ext (index .Content.Ext "price_range")}}
      <p class="mt-4 text-3xl font-semibold text-primary">{{index .Content.Ext "price_range"}}</p>
      {{else if .Content.Price}}
      <p class="mt-4 text-3xl font-semibold text-primary">{{printf "¥%.0f" .Content.Price}}</p>
      {{end}}
      <p class="mt-4 text-base leading-8 text-slate-600">{{.Content.Description}}</p>
      <div class="mt-6 grid grid-cols-2 gap-3 text-sm">
      {{if and .Content.Ext (index .Content.Ext "layout")}}<div class="rounded-lg bg-slate-50 p-3"><div class="text-slate-500">户型</div><div class="mt-1 font-medium">{{index .Content.Ext "layout"}}</div></div>{{end}}
      {{if and .Content.Ext (index .Content.Ext "location")}}<div class="rounded-lg bg-slate-50 p-3"><div class="text-slate-500">位置</div><div class="mt-1 font-medium">{{index .Content.Ext "location"}}</div></div>{{end}}
      {{if and .Content.Ext (index .Content.Ext "community")}}<div class="rounded-lg bg-slate-50 p-3"><div class="text-slate-500">小区</div><div class="mt-1 font-medium">{{index .Content.Ext "community"}}</div></div>{{end}}
      {{if and .Content.Ext (index .Content.Ext "area")}}<div class="rounded-lg bg-slate-50 p-3"><div class="text-slate-500">面积</div><div class="mt-1 font-medium">{{index .Content.Ext "area"}}</div></div>{{end}}
      {{if and .Content.Ext (index .Content.Ext "decoration")}}<div class="rounded-lg bg-slate-50 p-3"><div class="text-slate-500">装修</div><div class="mt-1 font-medium">{{index .Content.Ext "decoration"}}</div></div>{{end}}
      {{if and .Content.Ext (index .Content.Ext "features")}}<div class="rounded-lg bg-slate-50 p-3"><div class="text-slate-500">亮点</div><div class="mt-1 font-medium">{{index .Content.Ext "features"}}</div></div>{{end}}
      {{if and .Content.Ext (index .Content.Ext "badge")}}<div class="rounded-lg bg-slate-50 p-3"><div class="text-slate-500">标签</div><div class="mt-1 font-medium">{{index .Content.Ext "badge"}}</div></div>{{end}}
      {{if and .Content.Ext (index .Content.Ext "age")}}<div class="rounded-lg bg-slate-50 p-3"><div class="text-slate-500">房龄</div><div class="mt-1 font-medium">{{index .Content.Ext "age"}}</div></div>{{end}}
      {{if and .Content.Ext (index .Content.Ext "ownership")}}<div class="rounded-lg bg-slate-50 p-3"><div class="text-slate-500">产权</div><div class="mt-1 font-medium">{{index .Content.Ext "ownership"}}</div></div>{{end}}
    </div>
  </div>
  </div>

  <div class="mt-8 grid gap-8 lg:grid-cols-[minmax(0,1fr)_280px] lg:items-start">
    <section class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
      <h2 class="text-xl font-semibold">房源详情</h2>
      <div class="prose prose-slate mt-4 max-w-none">
        {{.Content.Content|Str2Html}}
      </div>
    </section>

    {{if index .ThemesExt "show_sidebar"}}
    {{include "sidebar.html"}}
    {{end}}
  </div>

  {{$related := Related .Content.Id 4}}
  {{if $related}}
  <section class="mt-8">
    <div class="mb-5 flex items-end justify-between">
      <div>
        <h2 class="text-xl font-semibold">相关房源</h2>
        <p class="mt-2 text-sm text-slate-500">同栏目或相近内容推荐。</p>
      </div>
    </div>
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
      {{range $related}}
      <a href="{{.URL}}" class="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md">
        <img src="{{DefaultCover .Img}}" alt="{{.Title}}" class="h-44 w-full object-cover">
        <div class="p-5">
          <h3 class="text-lg font-semibold">{{.Title}}</h3>
          <p class="mt-2 text-sm text-slate-600">{{StrLimit .Description 64 "…"}}</p>
          <div class="mt-4 text-sm font-medium text-primary">{{ParseTime .CreatedAt "2006-01-02"}}</div>
        </div>
      </a>
      {{end}}
    </div>
  </section>
  {{end}}
</main>
{{end}}

<div id="album-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/85 px-4 py-8 backdrop-blur-sm">
  <button type="button" id="album-modal-close" class="absolute right-4 top-4 rounded-full bg-white/10 px-4 py-2 text-sm font-medium text-white transition hover:bg-white/20">关闭</button>
  <div class="relative max-h-[88vh] w-full max-w-6xl">
    <img id="album-modal-img" src="" alt="" class="mx-auto max-h-[88vh] w-auto max-w-full rounded-2xl object-contain shadow-2xl">
  </div>
</div>

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